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

Here's a handy way to take three columns in a design, and have them appear in one column in mobile view.  This utilizes multiple nested & aligned tables that shift under each other.

EDIT: Simple version.


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="600" class="w320" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="190" height="100" class="float" bgcolor="#0000ff" style="color:#ffffff">1st Column</td>
                    <td width="15" class="hide"></td>
                      <td width="190" height="100" class="float" bgcolor="#ff0000" style="color:#ffffff">2nd Column</td>
                    <td width="15" class="hide"></td>
                    <td width="190" height="100" class="float" bgcolor="#006600" style="color:#ffffff">3nd Column</td>
              </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>
BThies BThies, 5 years ago

and yes, this same method can be used for 4+ columns:

Four Column 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="600" class="w320" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="135" height="100" class="float" bgcolor="#0000ff" style="color:#ffffff">1st Column</td>
                    <td width="20" class="hide"></td>
                      <td width="135" height="100" class="float" bgcolor="#ff0000" style="color:#ffffff">2nd Column</td>
                    <td width="20" class="hide"></td>
                    <td width="135" height="100" class="float" bgcolor="#006600" style="color:#ffffff">3nd Column</td>
                    <td width="20" class="hide"></td>
                    <td width="135" height="100" class="float" bgcolor="#FF00FF" style="color:#ffffff">4th Column</td>
              </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

Brian Thies
Professional Email Developer
Thies Publishing
BThies BThies, 5 years ago

Updating with simplified version.


Brian Thies
Professional Email Developer
Thies Publishing

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free