[code check] Why doesn't this simple responsive template work?
I borrowed the following responsive design email template for my own use. In a nutshell, two 320px tables are enclosed by a 640px table (because email design uses old-school HTML, and not floating divs). If the email is viewed on mobile, then it (should) read the @media-only styles (which compresses the width of the outer table) and stack the two inner tables. When I narrow the screen in Chrome, the two tables remain side-by-side. Why? What's wrong with the code?
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Newsletter</title>
<style type="text/css">
@media only screen and (max-device-width: 480px) {
/* mobile-specific CSS styles go here */
/* Attribute selectors are being used to avoid an unusual glitch in Yahoo! Mail. */
table[class=contenttable] {
width: 320px !important;
}
}
</style>
</head>
<body>
<!-- template based on http://www.campaignmonitor.com/guides/mobile/responsive/ -->
<table class="contenttable" width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
<td> <!-- encloses two 320px tables -->
<table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
<tr>
<td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
Product name goes here</span></p>
</td>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
<tr>
<td><p style="text-align:center; font-family:Arial,Verdana,sans serif;font-size:1.3em">
<span style="color:#9c120c; font-weight:bold;">NEW! </span><span style="color:#054281;font-weight:bold;">
Product name goes here</span></p>
</td>
</tr>
</table>
</td> <!-- END encloses two tables -->
</tr>
</table>
</body>
</html>
