Home Resources Blog

Displaying text and images exclusively in mobile email clients has long stumped email designers. It’s an insidious issue – just when you’re making progress in Outlook, Gmail just goes ahead and displays all your mobile content, like when that person you thought you’d spend forever with goes ahead and tips your vinyl collection up and down the whole darn street. But chin up, dear friend – it looks like those dog days are now over with this CSS fix.

To provide a bit of background, the central issue when hiding content is Gmail’s lack of support for the display CSS property. Gmail strips out display: none; from HTML email code, thus resulting in today’s trouble. So, while it’s been possible to ‘trick’ this email client by using display: none !important;, this makes it impossible to use display to toggle an element’s visibility in a media query for mobile devices. As Chris here puts it, !important is like the sledgehammer of CSS – use it with care, as nothing can stop it when it’s swinging.

Why hide content in desktop and webmail clients?

There are a couple of inventive reasons why you would want to do this, including:

  • To display links for mobile-specific content (eg. a “Download from the App Store” button)
  • When using responsive email techniques, like progressive disclosure

Both use cases have been cause for lengthy speculation in our forums, so it was no surprise that the solution was to be found there, also.

An elegant workaround

After months of to-fro, we combined a couple of approaches to hiding content in mobile and desktop clients and finally came up with a fairly lightweight solution. Lightweight, until you realise that all this is to compensate for the lack of one lousy CSS property:

<style>
/* Media query for displaying content in mobile email clients */
@media only screen and (max-device-width: 480px) { 
   .hide { max-height: none !important; font-size: 12px !important; display: block !important; }
}

...

/* CSS for hiding content in desktop/webmail clients */
.hide { max-height: 0px; font-size: 0; display: none; }
</style>

<!-- Content to hide in desktop/webmail clients, display in mobile -->
<p class="hide">Download from the App Store</p>

Hiding images makes for a more interesting scenario. Applying the .hide class to the <img> tag isn’t enough – you also have to surround the image with a <div> or <span> to ensure this technique plays along with both Gmail and Outlook. For example:

<!-- Image to hide in desktop/webmail clients, display in mobile -->
<div class="hide"><img src="..." class="hide" /></div>

Terrible. However, it does the job. There are two caveats, the first being that this technique does not work in Lotus Notes 6 & 7, however if you’ve been around the traps for long enough, you’ve likely realized that nothing CSS-related does. The second is that media query support is required in mobile email clients to make elements visible. So while this technique works in iOS Mail and Android Mail (which make up the vast majority of mobile opens), you likely won’t have much luck in Gmail for iOS.

Finally, a big thanks to LandoCalrissian for getting the conversation started, jeremypeter for providing a great code example and everyone else who contributed to this fix. And hang on to your vinyl, okay?

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 250,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Get started for free