Menu
I'm trying to have to columns display side by side on large screens and display stacked on top of each other on mobile devices but I've been unable to so far, I tried following the same approach ZURB used on their templates where they added to divs floated and then clearing the float on small devices like:
<table>
<tr>
<td>
<div class="column" style="float: left; width: 300px;">
<!-- content -->
</div>
<div class="column" style="float: left; width: 300px;">
<!-- content -->
</div>
</td>
<tr>
</table>
And in my <style> tag:
@media screen and (max-device-width: 600px) {
.column {
width: auto !important;
float: none !important;
display: block !important;
}
}
It looks fine almost everywhere but outlook.com apparently strips floats from the css so they don't look side by side there.
Something I tried doing was using table cells instead of divs like:
<table>
<tr>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<td width="300" align="left" class="column">
<!-- content -->
</td>
<tr>
</table>
Keeping the same CSS classes but even though it fixes the issue in desktop clients it looks side by side on iOS devices (as if the display: block isn't getting applied to the tds)
Anyone have an idea?
578
You can create two columns simply by creating a two-column table and then using classes to have the columns stack. The block class turns the table cells into blocks on mobile, and the content behaves accordingly and automatically stacks on mobile. This results in a normal stack.
Responsive Two Column LayoutResize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).
On the View tab, in the Current View group, click View Settings. In the Advanced View Settings dialog box, click Columns. In the Show Columns dialog box, in the Available columns list, click a column name, and then click Add.
Responsive email design best practicesStick to a single column layout. Less shifting and moving makes it easier for your audience to read your content. At minimum, use 13- or 14-pt font for the body text and no smaller than 20-pt for the titles. This will make your email much more readable on a small screen.
You should switch to using tables instead of div's. Take a look at the following HTML markup for reference. Also, this guide would be very helpful: http://www.campaignmonitor.com/guides/mobile/
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
<!-- content -->
</table>
<table cellpadding="0" cellspacing="0" border="0" width="300" align="left">
<!-- content -->
</table>
</td>
<tr>
</table>
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
