responsive email template

HTML

<body>
<div class="block"> 
  <!-- start of header -->
  <table width="100%" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="header">
    <tbody>
      <tr>
        <td><table width="580" bgcolor="#0db9ea" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" hlitebg="edit" shadow="edit">
            <tbody>
              <tr>
                <td><!-- logo -->
                  
                  <table width="280" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth">
                    <tbody>
                      <tr>
                        <td valign="middle" width="270" style="padding: 10px 0 10px 20px;" class="logo"><div class="imgpop"> <a href="#"><img src="http://placehold.it/100x28" alt="logo" class="logo" style="display:block; border:none; outline:none; text-decoration:none;" border="0" st-image="edit"></a> </div></td>
                      </tr>
                    </tbody>
                  </table>
                  
                  <!-- End of logo --> 
                  <!-- menu -->
                  
                  <table width="280" cellpadding="0" cellspacing="0" border="0" align="right" class="devicewidth">
                    <tbody>
                      <tr>
                        <td width="270" valign="middle" style="font-family: Helvetica, Arial, sans-serif;font-size: 14px; color: #ffffff;line-height: 24px; padding: 10px 0;" align="right" class="menu" st-content="menu"><a href="#" style="text-decoration: none; color: #ffffff;">HOME</a> &nbsp;|&nbsp; <a href="#" style="text-decoration: none; color: #ffffff;">ABOUT</a> &nbsp;|&nbsp; <a href="#" style="text-decoration: none; color: #ffffff;">SHOP</a></td>
                        <td width="20"></td>
                      </tr>
                    </tbody>
                  </table>
                  
                  <!-- End of Menu --></td>
              </tr>
            </tbody>
          </table></td>
...

CSS

/* Client-specific Styles */

#outlook a {
	padding: 0;
} /* Force Outlook to provide a "view in browser" menu link. */
body {
	width: 100% !important;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	margin: 0;
	padding: 0;
}
/* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
.ExternalClass {
	width: 100%;
} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
	line-height: 100%;
} /* Force Hotmail to display normal line spacing.  More on that: http://www.emailonacid.com/forum/viewthread/43/ */
#backgroundTable {
	margin: 0;
	padding: 0;
	width: 100% !important;
	line-height: 100% !important;
}
img {
	outline: none;
	text-decoration: none;
	border: none;
	-ms-interpolation-mode: bicubic;
}
a img {
	border: none;
}
.image_fix {
	display: block;
}
p {
	margin: 0px 0px !important;
}
table td {
	border-collapse: collapse;
}
table {
	border-collapse: collapse;
	mso-table-lspace: 0pt;
	mso-table-rspace: 0pt;
}
/*a {color: #e95353;text-decoration: none;text-decoration:none!important;}*/
         /*STYLES*/
table[class=full] {
	width: 100%;
	clear: both;
}
         
         /*################################################*/
         /*IPAD STYLES*/
         /*################################################*/
         @media only screen and (max-width: 640px) {
a[href^="tel"], a[href^="sms"] {
	text-decoration: none;
	color: #ffffff; /* or whatever your want */
	pointer-events: none;
	cursor: default;
}
.mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
	text-decoration: default;
	color: #ffffff !important;
	pointer-events: auto;
	cursor: default;
}
table[class=devicewidth] {
	width: 440px!important;
	text-align: center!important;
}
table[class=devicewidthinner] {
	width: 420px!important;
	text-align: center!important;
}
table[class="sthide"] {
	display:...