Thursday, April 16, 2015

HTML Email: Hiding content on mobile/desktop

If you are coding a responsive email and want to show/hide content on either desktop or mobile. The main issue is that Gmail and Outlook 2010 will ignore any display:none in the CSS. The following solution worked very nicely! (link to original content)


<style>
@media only screen and (max-width: 480px) { 
.invisible { max-height: none !important; font-size: 12px !important; display: block !important; }
}

...

.invisible { max-height: 0px; font-size: 0; display: none; }
</style>