Я создаю письмо, чтобы оно было совместимо со всеми устройствами / размерами экрана. Поскольку это электронное письмо, я должен использовать таблицы, которые, как мы все знаем, были созданы в аду. У меня проблема с тем, что у меня есть три столбца рядом с идентичным кодом, но средний столбец на маленьких экранах сжимается - я не могу понять, как это предотвратить. У кого-нибудь есть идеи. В идеале сценарий должен состоять в том, чтобы макет уменьшался на меньших экранах, а не становился более узким столбцом.
Код:
<table style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
<tbody>
<tr class="desktop" width="600">
<td class="content" style="background-color: white;"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/free-shipping.jpg" style="max-width: 100%;margin: 0 auto;display: block;" />
</td>
</tr>
</tbody>
</table>
<table class="three-column" style="text-align: center;width: 100%;border-collapse: collapse;background-color: white;">
<tbody>
<tr width="660">
<td class="content spacer-cell" height="75px" style="width: 2%;background-color: white;">
</td>
<td class="content" style="background-color: white;"><a href="${clickthrough('Second_T3_Img1')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/time.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
</td>
<td class="content" style="background-color: white;[![enter image description here][1]][1]"><a href="${clickthrough('Second_T3_Img2')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/chat.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
</td>
<td class="content" style="background-color: white;"><a href="${clickthrough('Second_T3_Img3')}"><img src="https://static.cdn.responsys.net/i5/responsysimages/content/hugobossf/chat.png" style="max-width: 100%;margin: 0 auto;display: block;" /></a>
</td>
<td class="content spacer-cell" height="75px" style="width: 10px;background-color: white;">
</td>
</tr>
<tr>
<td class="content spacer-cell" height="105px" style="width: 10px;background-color: white;">
</td>
<td class="content" style="background-color: white;">
<p style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0px;">WE ARE HERE FOR YOU
</p>
<p class="label-heading"><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Have a style question?
<br />
Need size advice?
<br />
Chat with us!</a>
</p>
<p>
</p>
</td>
<td class="content" style="background-color: white;">
<p class="label-heading" style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0;">NEED MORE TIME?
</p>
<p><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">For your convenience,
<br />
we have extended our
<br />
return policy to 60 days.</a>
</p>
</td>
<td class="content" style="background-color: white;">
<p class="label-heading" style="font-family:'Univers', Arial, sans-serif;font-size: 16px;font-weight: 700;margin-top:0;">NEED MORE TIME?
</p>
<p><a class="label-cta" href="${clickthrough('Second_T3_Prod1_CTA')}" style="font-family:'Univers', Arial, sans-serif;color: #000000;text-decoration: none;padding-bottom: 2px;font-size: 14px;margin-top: 0px;display: block;">Our Customer Service team is
<br />
happy to assist you 24/7 at
<br />
1-800-HUGOBOSS</a>
</p>
</td>
<td class="content spacer-cell" height="105px" style="width: 2%;background-color: white;">
</td>
</tr>
<tr class="spacer-5" style="height: 5px;">
</tr>
</tbody>
</table>
