I am building out an email to be compatible across all devices/screen sizes. Since it is an email, I have to use tables which as we all know were spawned in hell. I am having an issue where I have three columns side-by-side with identical code but the middle column is getting squished on small screens - I cannot for the life of me figure out how to prevent this. Anyone have any ideas. The ideal scenario would be to have the layout just scale down on smaller screens rather than the columns getting more narrow.
Code:
<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>
There a few things wrong here. Each
<TD>must be the same size if you have rows after eachother in the same table. You little spacers are 2% in first<tr>, and 10px in next<tr>. Besides that, you need to make a width in all the 's, otherwise the mail client dosnt how big it should be and makes a quess. And finally you cant make a width on a<tr>tag.Try with this code:
I can see you are playing with Responsys, say if you need any help there, I have worked with Responsys for +10 years now.