Menu
I've a test layout which uses tables for displaying two columns and media queries which stacks the two columns to one on email clients which support media queries. I am sticking with tables instead of divs as we need to support Outlook as well :(. The layout works great in Android 4.3 and below (the columns stack up) but blows up on Nexus 5 (Android 4.4.2). The two columns still show up next to each other with the second column being completely squished. It seems like 4.4.2 does not support display block at td. Has anyone else experienced this? If yes, is there any work around for this? By the way, it seems like only display block and display:inline-block are not supported on Nexus 5, if I set the tds to display:none in my media query, they are hidden on the screen. Below is a basic html email template which doesn't work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0;width:device-width">
<!-- So that mobile webkit will display zoomed in -->
<title>Email template</title>
<!-- disable auto telephone linking in iOS -->
<meta name="format-detection" content="telephone=no">
<style type="text/css">
@media screen and (max-width:640px) {
table[class="container"] {
width: 100%!important;
}
td[class="cell"] {
background-color: #cc3333;
width: 100%!important;
display: block!important;
}
}
</style>
</head>
<body>
<table width="640" align="center" cellpadding="0" cellspacing="0" class="container">
<tr>
<td class="cell">Hello world</td>
<td class="cell">Hello world</td>
</tr>
</table>
</body>
</html>
Edit 1/14 So using tables as block elements works. Since the tables are floated (using align) they wrap in case the width is less than 640px. Now the only issue is, when the two tables wrap, since their width is set to 320px the text doesn't reflow to 100% on devices with native resolution of more than 320px but less than 640px (say iPhone in landscape mode which is 480px) but instead wraps at 320px (leaving around 160px of white space on the right). I know I can change the width using media query but unfortunately it doesn't work on Gmail app (grrh). Any thoughts/suggestions? Simple table structure -
<table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table align="left" style="width:49%;" border="1">
<tr>
<td style="max-width: 100%">long text which should take about 480px
</td>
</tr>
</table>
<table style="width:49%;max-width: 100%" align="left">
<tr>
<td style="width:100%;">long text which should take about 480px
</td>
</tr>
</table>
</td>
</tr>
</table>
810
I think, that it will be better to use only table for your css styles, because td tag is more unpredictable
you can find a good example of 2-columns layout here:
http://www.campaignmonitor.com/guides/mobile/responsive/
72
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
