I need a reliable method to conceal content from mobile email clients.
The ideal solution would hide content by default on devices that don't read media queries, but display on desktop clients that also don't read media queries.
Currently, I am using code based on another post to hide the content and then utilizing a media query to reveal it. I have come across several resources detailing solutions for hiding content on desktops, which has been very helpful.
The challenges with my current approach include:
- In Gmail desktop, the content doesn't show even though "display: block !important" is set in the query with the !important declaration
- This method is ineffective for Outlook 2003 or older versions since they do not parse media queries
- It does not work on Yahoo and AOL Mail on desktop because, presumably, they do not support media queries
To hide content on mobile, use this wrapper div:
<div class="desktop" style="width:0; overflow:hidden;float:left; display:none">
To override the media query and activate the content for tablets and desktops, use:
@media only screen and (min-width: 768px) {
.desktop {
display : block !important;
width : auto !important;
overflow : visible !important;
float : none !important;
}