Mobile Show

This code will hide content on desktop and show that content on mobile. Content that is hidden on mobile is easy, content that is hidden fully on the desktop version is another story. Here is the method that keeps that content from rearing its ugly head while render testing.

Note 1: Use a whole <table> inside this code. That means close your <table> above the hidden content, use this mobile show, then open up another <table> after it.

Note 2: This hide will not work when forwarding the email.

<!--[if !mso]><!-->
<div class="show" style="font-size:0; line-height:0; display:none; max-width:0; max-height:0; overflow:hidden;">
 <table cellpadding="0" cellspacing="0" border="0" width="100%">
   <tr>
     <td align="left" valign="top" style="font-family:Helvetica, Arial, sans-serif; font-size:14px; mso-line-height-rule:exactly; line-height:18px; color:#3a3a3a; padding:20px 20px 20px 20px;">CONTENT THAT IS HIDDEN ON DESKTOP AND SHOWS ON MOBILE</td>
   </tr>
 </table>
</div>
<!--<![endif]-->

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.show {
 display: block !important;
 overflow: visible !important;
 max-width: inherit !important;
 max-height: inherit !important;
}
}
</style>