I am using the Email on Acid responsive email template as a guide. I need to create three columns of text with different background colors and equal heights that responds to smaller screen widths. For the mobile version the heights of the columns should adapt to the size of the content. This looks easy to implement with media queries but one of the problems with email design is gmail does not support media queries. So is there any way other than media queries to make these column heights even on desktop and then adapt to the content size in mobile?
I put a code example on fiddle. http://jsfiddle.net/jackygrahamez/J6NLh/
Stylesheet
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:sans-serif}
table {border-collapse: collapse;}
@media only screen and (max-width: 640px) {
body[yahoo] .deviceWidth {width:440px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
@media only screen and (max-width: 479px) {
body[yahoo] .deviceWidth {width:280px!important; padding:0;}
body[yahoo] .center {text-align: center!important;}
}
HTML
<!doctype html>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" yahoo="fix" style="font-family:sans-serif">
<!-- Wrapper -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" style="padding-top:20px">
<!-- Three Column Images -->
<!-- 3 Small Images -->
<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#FFFFFF">
<tbody>
<tr>
<td valign="top">
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#002C53" style="margin-right:10px;">
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
1
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis elit vitae felis ornare pulvinar. Sed quis sollicitudin lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec suscipit nunc quis tortor dapibus, eget ornare dolor volutpat. Duis a est sit amet urna consequat tempor sed quis justo. Nam molestie, risus sit amet dapibus molestie, augue neque posuere justo, non cursus nisl leo id quam. Maecenas luctus est non suscipit dapibus.
</p>
</td>
</tr>
</tbody>
</table><!-- End Image 1 -->
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#005E92" style="margin-right:10px;">
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
2
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod.
</p>
</td>
</tr>
</tbody>
</table><!-- End Image 2 -->
<table width="31%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#008DCD" >
<tbody>
<tr>
<td height="50" style="padding:0 10px;height:50px;">
<p style="color:#FFFFFF;font-size:24px;line-height:0px;">
3
</p>
</td>
</tr>
<tr>
<td valign="top" style="padding:0 20px;">
<p style="color:#FFFFFF;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed iaculis neque. Proin congue velit at justo lobortis euismod. Sed congue mi vel leo ornare, in accumsan enim adipiscing. Cras lobortis augue a porta ullamcorper.
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Image 3 -->
</td>
</tr>
<tr>
<td><div style="height:6px"> </div></td>
</tr>
</tbody></table>
</td>
</tr>
</table>
</body>
