Mobile Hide and Mobile Show

Mobile Hide

This content will show on desktop and hide on mobile. Always use on a <td>.

<td class="hidden" 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 MOBILE AND SHOWS ON DESKTOP</td>

css

<style type="text/css">
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
.hidden {
  width: 0 !important;
  display: none !important;
}
}
</style>

Mobile Show

This content will show on mobile and hide on desktop. Use a whole <table> inside this code. 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>