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>