Hi all! I’ve just started to tackle my second ever enewsletter template and I’d like to make it responsive. Amazingly, it seems it is possible to do this, even with tables and CSS1 
I’ve been using Campaign Monitor’s great guide to step me through this but unfortunately I don’t think I’ve quite understood the theory as I can’t get my two column grid to flow into one column when the browser window width is restricted. I suspect it’s either got to do with where I’m placing the table class that I’ve targeted in the media query; but I’ve tried a few options and have tangled myself to the point of confusion. Perhaps the issue lies with the media query itself, as I can’t get the table class=“FollowUs” to not display when viewing on small screens either 
Could someone please hold my hand and help me out?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Facebook sharing information tags -->
<meta property="og:title" content="Illuminate issue X" />
<title>Illuminate issue X</title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Smaller Screen Styles */
@media only screen and (max-device-width: 480px) {
table[id=backgroundTable]{
max-width:550px !important;
width:100% !important;
}
table[id=newsletterWrapper],table[class=contentTable]{
width:320px !important;
}
table[class=FollowUs]{
display:none;
}
}
.button{
background: #49A942;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
color: #fff;
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
}
.article img{
display: block;
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table id="backgroundTable" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
<tr>
<td align="center" valign="top">
<table id="newsletterWrapper" border="0" cellpadding="0" cellspacing="0" height="100" width="550">
<tr>
<td align="center" valign="top">
<!-- // Newsletter Preheader \\\\ -->
<table class="contentTable" border="0" cellpadding="0" cellspacing="0" width="550">
<tr>
<td class="preheaderContent" valign="top">
<p>Use this area to offer a short teaser of the newsletter content. Text here will show in the preview area of some email clients.
</p>
<a class="button">Subscribe to future issues</a>
<a class="button">View online</a>
<a class="button">Download as .pdf</a>
</td>
</tr>
</table>
<!-- // Newsletter Masthead \\\\ -->
<!-- // Newsletter Call to Action \\\\ -->
<table class="contentTable" border="0" cellpadding="0" cellspacing="0" width="550">
<tr>
<td align="center" valign="top" width="320">
<p>Blurb about WEHI and donation CTA
<a class="button" style="display: block;">Donate now</a>
</p>
<td>
</tr>
</table>
<!-- // Newsletter articles \\\\ -->
<table class="contentTable" border="0" cellpadding="0" cellspacing="0" width="550">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="320" align="left">
<tr>
<td class="article" valign="top">
<img src="http://placehold.it/120x100" alt="" title="" align="left" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-right:10px;">
<h3>Research news 1</h3>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
<a class="button">Read more</a>
</td>
</tr>
<tr>
<td class="article" valign="top">
<img src="http://placehold.it/120x100" alt="" title="" align="right" style="max-width:120px; max-height:100px; margin-bottom:0px; padding-right:10px;">
<h3>Community news 1</h3>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
<a class="button">Read more</a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="230">
<tr>
<td class="aside" valign="top">
<h4>From the director</h4>
<p>At aut eum ut qui ates etur, quam ra quo tetur aperibusda dolore nihil id maiori con prem quossincient aut possusdandis re, occus dolorum et aut aut de voluptas es imus exceatu riatempore explictorit, in con etur soluptas peribus acest, quae volum ipiciet restius cillat ditaturit pos magnitaecea nonsequi rehendipiet moloribus modi officiis idelis plibust laborro corume il estiumet, senimporat.
</p>
</td>
</tr>
<tr>
<td valign="top">
<table class="FollowUs" cellpadding="0" cellspacing="0" width="230">
<tr>
<td>
<h4>Follow us</h4>
</td>
</tr>
<tr>
<td align="left" valign="middle" width="16" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:10px;">
<img src="http://www.wehi.edu.au/uploads/e-mail/facebook.jpg" alt="Facebook logo" title="Facebook" style="max-width:16px; max-height:16px; margin:0 !important;">
</td>
<td align="left" valign="middle" width="16" style="padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:10px;">
<img src="http://www.wehi.edu.au/uploads/e-mail/twitter.jpg" alt="twitter logo" title="Twitter" style="max-width:16px; max-height:16px; margin:0 !important;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
