Responsive 2-to-1 column doesn't work

I followed this article:
http://www.campaignmonitor.com/guides/mobile/responsive/

Here is my code which I copied verbatim from the above article:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        @media only screen and (max-device-width: 480px) {
            table[class=contenttable] { 
                width:320px !important;
            }
        }
    </style>
</head>

<body>
<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable"> 
<tr>
    <td>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p>Column Left Content</p></td>
      </tr>
    </table>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
      <tr>
        <td><p>Column Right Content</p></td>
      </tr>
    </table>
    </td>
  </tr>
</table>


<center><p style="font-size:11px;"> <unsubscribe>Unsubscribe</unsubscribe> </p></center>


</body>
</html>

I also tried various different device metatags and doctypes, but they didn't work, either, so the code above is using only the code supplied in the article. If something more were required, I trust it would have been mentioned.

The columns from this code are not responsive in any desktop client or browser. If this solution is only responsive in mobile devices, I find that strange. How bulletproof is it?

You can see the result here:
http://www.studiopress.com/responsive/

^ Enter this URL into the text field: 22graphics.com/pepe/test.html

Here is a screenshot for the lazy:
screenshot

davidaf davidaf, 2 years ago

Hey there Nate22!

The code there is specific to mobile devices, you can see where I tested the very same code in a mobile environment here - https://litmus.com/pub/d8be783

It's the max-device-width: 480px declaration that makes it specific to devices rather than just screen sizes. If you'd like to respond to screen size alone, regardless of device (which is actually what we do in our mobile templates) you can simply use

max-width: 480px

I hope that helps, nate22!  Let me know if you need anything else! :)


The Campaign Monitor Blog – HTML email smarts to go with your good looks
nate22, 2 years ago

Dang, I just figured that out myself after working on this problem on and off for about 4 hours.

My previous responsive email campaigns all used 'max-device-width' so I'm not sure why it won't work for these tables, too, in the browser and on desktop email. I guess it's a table problem?

Thank you for responding!

nate22, 2 years ago

Actually, you know what? Even that did not work. It works in all my browsers and the preview mode of Coda, but once it goes through CampaignMonitor's emailizer template system, it no longer works for desktop email clients. I guess I won't worry about responsive table columns for desktops. Hopefully everyone has a monitor bigger than 640px anyway.

davidaf davidaf, 2 years ago

Hey nate22

If you want to send over your complete code or contact us in support with the account specifics and the name of the campaign we can try to see what's going on.


The Campaign Monitor Blog – HTML email smarts to go with your good looks
nate22, 2 years ago

Thank you, davidaf,

Here is my complete code as it stands right now:

<!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>
<title>title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css"> 
        html {width:100%; margin:0; padding:0; background:blue;}
        body {background:yellow; margin:0; padding:0;}

        
    @media only screen and (max-width: 480px) {
        table[class=cols] { 
        display: table; 
            width:320px !important; background-color:aqua; 
        }
    }
</style>
</head>

<body>

<center>
    <table class="cols" width="640" border="0" cellpadding="0" cellspacing="0"> 
        <tr>
        <td>
        <table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
          <tr>
            <td><multiline label='Paragraph'>Column Content</multiline></td>
          </tr>
        </table>
        <table width="320" border="0" cellspacing="0" cellpadding="20" align="right" bgcolor="red">
          <tr>
            <td><multiline label='Paragraph'>Column Content</multiline></td>
          </tr>
        </table>
            <center><p style="font-size:11px;"><unsubscribe>Unsubscribe</unsubscribe></p></center>
        </td>
      </tr>
    </table>
</center>

</body>
</html>

Yes, it is ugly. I have just given everything colors so I can see what parts are responsive and which parts arent.

Basically, the problem seems to be that the 2 smaller tables acting as 'columns' inside the main table are not stacking into 1 column at 480 like they should be. To make sure the media query is working properly, I made the main table change color to light blue at 480 pixels wide.

Here it is online: http://22graphics.com/pepe/test.html ...and it stacks fine when the browser scales down to below 480 wide. On iphone, everything stacks, too. Just desktop email clients don't want to stack like they should for some reason.

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