8

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?

Javier Villanueva
  • 3,886
  • 13
  • 48
  • 80

1 Answers1

11

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>
hmhcreative
  • 495
  • 4
  • 9