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, 4 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, 4 years ago

Updating with simplified version.


Brian Thies
Professional Email Developer
Thies Publishing

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098