Верстака email, как сделать button width 100% на mobile и 250px desktop без @media

[gryshchenko1989@gmail.com]

Подскажите пожалуйста как сделать ширину кнопки 100% на мобильных устройствах и фиксированную (250px) на больших разрешениях ?

 

<table class="one-column backgroundInner font" border="0" cellpadding="20" cellspacing="0" width="100%" style="border-spacing:0;" >
	<tr>
		<td style="line-height: 18px; text-align:center;">
			<!-- START BUTTON -->
			<center>
             <!--[if (gte mso 9)|(IE)]>
             <table width="150" align="center">
             <tr>
             <td>
             <![endif]-->
				<table cellpadding="0" cellspacing="0" border="0" >
					<td class="button_background outer" align="center" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;">
					<a href="http://www.google.com"  target="_blank" class="button_link button_width button fonts_color1 button_font-size2 ">Learn More</a>
					</td>
				</table>
              <!--[if (gte mso 9)|(IE)]>
              </td>
              </tr>
              </table>
              <![endif]-->
			</center>
			<!-- END BUTTON -->				
		</td>
	</tr>
</table>

 

[klierik]

Та никак же.

Но советую посмотреть шаблоны http://foundation.zurb.com/emails.html может там что-то есть.

PS: опираясь на вышеуказанный код предполагаю что письмо ты верстаешь в первые. Этот код работать не будет. Тебе надо все стили писать инлайном а CSS использовать версии 2.0, и то далеко не весь

[kattiperk]

Можно попробовать через max-width, но вроде не подходит такое.
Можно и media запросы писать, только не все почтовики распознают. Верстайте так, чтоб любая версия выглядела хорошо, пусть и с отличием. 
Внутри ссылки еще нужно span с текстом сделать и стили продублировать.

[Vessel]

<!-- Button -->
<tr>
	<td width="100%" valign="top" align="center" style="padding: 20px 0 20px;">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="100%" bgcolor="#ffffff" valign="top" align="center" style="border-radius: 3px;">
					<a class="btn" href="#" target="_blank"
					 	style="text-decoration: none;
					 		width: 100%;
					 		font-size: 16px;
					 		line-height: 100%;
					 		font-family: Arial, sans-serif;
					 		font-weight: bold;
					 		color: #f5a815;
					 		border-radius: 3px;
					 		background: #ffffff;
					 		padding: 15px 0;
					 		border: 0px solid #f5a815;
					 		display: inline-block;
					 		text-transform: uppercase;">
					 			<span style="color: #f5a815;">
									<!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                  		Посмотреть на сайте
                                  	<!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
								</span>
					</a>
				</td>
			</tr>
		</table>
	</td>
</tr>

 

[gryshchenko1989@gmail.com]

46 минут назад, Vessel сказал:

<!-- Button -->
<tr>
	<td width="100%" valign="top" align="center" style="padding: 20px 0 20px;">
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td width="100%" bgcolor="#ffffff" valign="top" align="center" style="border-radius: 3px;">
					<a class="btn" href="#" target="_blank"
					 	style="text-decoration: none;
					 		width: 100%;
					 		font-size: 16px;
					 		line-height: 100%;
					 		font-family: Arial, sans-serif;
					 		font-weight: bold;
					 		color: #f5a815;
					 		border-radius: 3px;
					 		background: #ffffff;
					 		padding: 15px 0;
					 		border: 0px solid #f5a815;
					 		display: inline-block;
					 		text-transform: uppercase;">
					 			<span style="color: #f5a815;">
									<!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
                                  		Посмотреть на сайте
                                  	<!--[if gte mso 9]>&nbsp;&nbsp;&nbsp;&nbsp;<![endif]-->
								</span>
					</a>
				</td>
			</tr>
		</table>
	</td>
</tr>

 

Спасибо за помощь, в вашем случает кнопка изначально на весь экран, а у меня задача

 

попробую еще поискать, а если не получиться оставлю как есть.
Еще раз спасибо!

[Vessel]

Она изначально на весь экран, потому что самая внешняя таблица имеет 100%. Это мой сниппет кнопки, один из четырех. Она полностью отвечает вашей задаче. Вам внешней таблице просто нужно убрать 100% и добавить выравнивание по центру. Либо позиционировать кнопку, исходя из макета, но уже на базе ячейки. Я же не знаю, какой там контекст. Вёрстка писем имеет массу нюансов, тщательно тестируйте вёрстку везде, где можно. 

 

[gryshchenko1989@gmail.com]

1 час назад, Vessel сказал:

Она изначально на весь экран, потому что самая внешняя таблица имеет 100%. Это мой сниппет кнопки, один из четырех. Она полностью отвечает вашей задаче. Вам внешней таблице просто нужно убрать 100% и добавить выравнивание по центру. Либо позиционировать кнопку, исходя из макета, но уже на базе ячейки. Я же не знаю, какой там контекст. Вёрстка писем имеет массу нюансов, тщательно тестируйте вёрстку везде, где можно. 

 

Написал в личку 

Edited May 28, 2017 by gryshchenko1989@gmail.com