FR0
Two Column Responsive Layout Breaking in Outlook
I have been using adaptive versions of HTML templates for a while, but now want to do a proper responsive one. I recently became a member of Litmus and while perusing the resources available, I found a primer by Kevin Mandeville (great btw). I followed the example on the code, which works beautifully, except on Outlook of course. In the past, I have been hacking it to work on Outlook by reducing the size/precentage on the tables, but that of course screws up the look for other clients. I have been looking into conditionals, but I might not be applying them correctly, as they do not make a difference. Below you will find a screenshot and the sample code. Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width-device-width, initial-scale=1">
<meta http-equiv="X-UA-compatible" content="IE-edge">
<meta charset="UTF-8">
<style type="text/css">
body{
padding: 0px;
margin: 0px;
font-family: font-family:Palatino, Georgia;
}
@media screen and (max-width: 600px) {
table[class="responsive-table"] {
width: 100% !important;
}
table[class="responsive-table2"] {
width: 100% !important;
}
img[class="responsive-image"] {
max-width: 100% !important;
height: auto !important;
}
td[class="headline"] {
font-size: 36px !important;
background: #c75ebb;
color: #f2f600;
padding-bottom: 20px;
}
}
</style>
</head>
<body>
<!-- Full width table -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<!--Full width container -->
<table width="580" border="0" cellspacing="0" cellpadding="0" class="responsive-table">
<tr>
<td>
<img src="flower.jpg" border="0" width="580" height="375" class="responsive-image" style="display: block;"/>
</td>
</tr>
<tr>
<td align="center" style="font-size: 48px; padding-top: 20px;" class="headline">
I ♥ Flowers
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 20px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
<tr>
<td>
<table width="290" align="right" border="0" cellspacing="0" cellpadding="0" class="responsive-table2">
<tr>
<td bgcolor="#aaaaaa" style="padding: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
<table width="290" align="left" border="0" cellspacing="0" cellpadding="0" class="responsive-table2">
<tr>
<td bgcolor="#dddddd" style="padding: 15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Between the two tables place a ghost column.
Let me know if this works for you.
That worked, albeit with a tiny gap in between (that I can live with), but it screws up the alignment for the rest. I do not understand very well how these conditionals work, so I am not sure where I would add another to fix the alignment. Here's a visual aid:
this code works:
there you have it, i dont know how to post html
This worked flawlessly, thanks Badiu! I need to test it more now, but so far so good. I need to review the placement of the conditionals to understand the logic better. I am guessing I only need to worry about the left aligned one and the other falls in line? Here's a screenshot:
practice/testing/practice/testing , i started about a month ago with html email, and now i have a decent basis ;)