HOW TO: Convert two columns into one column in mobile devices

For those who haven't discovered this method (and there may be other ways to do this as well), here's a handy way to take two columns in a design, and have them appear in one column in mobile view.  This simply shifts the content in the right column under the content in the left column.

EDIT: Simple version - no table alignment necessary

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>

<style type="text/css" media="all">
    /* Mobile-specific Styles */
    @media only screen and (max-device-width: 480px) {
        table[class=w320], td[class=w320] { width:320px !important; }
        td[class=float] { clear:both; float:left; width:320px !important; }
        td[class=hide] { display:none !important; visibility:hidden !important; }
    }
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; background-color:#ffffff;} 
    table, td { border-collapse: collapse; }
</style>
</head>

<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td align="center" bgcolor="#ffffff">
            <table width="640" class="w320" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="310" height="100" class="float" bgcolor="#0000ff" style="color:#ffffff">1st Column</td>
                    <td width="20" class="hide"></td>
                    <td width="310" height="100" class="float" bgcolor="#ff0000" style="color:#ffffff">2nd Column</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 2 years ago

Thanks, Brian - as always, this is genius. I've been meaning to publish this post detailing this technique and will revise it to mention your contribution here. Many thanks again!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 2 years ago

Hi Ros,

I tested exactly how you set it up in your post, and there are still gaps between/around the table.

http://www.thiespublishing.com/images/gaps.gif

You can see the 3px black space on the left, and 4px black space between the tables.  The right column has been reduced to 293px.


There are two issues at play:
1) There's an automatic margin on all cells of 2.25pt that can only be eliminated by setting margin-left and margin-right to -2.25pt.  This, however, will break the layout in all other email clients.
2) Even after setting the margin like that, there's still a spacing issue when Outlook 2007/2010 converts the table and cell sizes to inches.  A 640px width table is converted to 6.67".  This, unfortunately doesn't even out, as the 320px wide nested tables are converted to 3.33".  (It rounds everything, so 3.335 can't be used).

So 3.33 + 3.33 = 6.66 in a 6.67 table.  So when setting the margin-right/margin-left to -2.25pt, there's STILL a 1px gap between the tables.

Have I mentioned lately that I hate Microsoft?


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 2 years ago

Hi Brian, sorry, I haven't updated the post to mention a fix to table spacing in Outlook. It's still in draft stage, sorry! Hopefully this will solve what you're seeing above. Thank you for the awesome follow-up!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BThies BThies, 2 years ago

Hi Ros, I used "mso-table-lspace:0pt; mso-table-rspace:0pt;" when doing that test above, and that spacing still appeared as pointed out in the image.


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
BThies BThies, 2 years ago

We're overthinking this.  I've updated the code in the first post.  It's so simple...


Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw
roshodgekiss roshodgekiss, 2 years ago

Wow, that's great! I'll update our upcoming post to mention this method. As always, awesome work! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account