Skip to content

Instantly share code, notes, and snippets.

@townivan
Created June 16, 2014 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save townivan/3507a1b74f8b5591ac62 to your computer and use it in GitHub Desktop.
Save townivan/3507a1b74f8b5591ac62 to your computer and use it in GitHub Desktop.
Email HTML. Hide content on desktop but show it on mobile. This is tougher because Outlook 2007 (desktop) won't recognize CSS that you would use to normally hide something.
/* in your css. (in this example, in the media queries specific part which is just for phone) */
@media only screen and (max-device-width:480px){
*[class*="mobile-only"]{display:block !important;max-height:none !important}
}
<!-- this html section will only show on phones -->
<!--[if !mso]><!-- -->
<div class="mobile-only" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
<div style="text-align:center;">
<img src="logo.png">
</div>
</div>
<!--<![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment