I am viewing this article:
After closely examining everything to make sure I copied it exactly (I did), I spent about 30 minutes trying to figure out why it wasn't responsive like it should be.
What I discovered was that this code...
<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">
...should really be this:
<table border="0" cellpadding="0" cellspacing="0" class="contenttable">
The only difference is I removed the width="640" and now it acts responsive. Otherwise, it does not scale down as it supposedly should. I believe the order of specificity prohibits the CSS from overriding the hardcoded 640 width.
I also noticed the example Github code given at the end has a width of 100% not 640, so I think it's an oversight in the article that should be corrected.
Actually both the width of 640 and the contenttable class should both be present on the containing table. You'd need to leave in the width of 640 for desktop clients, and then override the width set with the contenttable class for mobile devices
You can test it right here and see it doesn't work:
If change the media query from 'max-device-width' to 'max-width' it solves the problem and I get responsive stacking of the columns everywhere.
My previous responsive designs 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.
From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that drive real business results.Get started for free