How to hide mobile content in desktop clients

EDIT: Scroll down through comments to see code example

I've seen quite a few posts with users asking how to hide mobile content in desktop clients.  I know gmail doesn't like display: none and Outlook has some issues. So here are the styles I use to hide my mobile content on desktop clients. 

display: none; 
font-size: 0; 
max-height: 0; 
line-height: 0; 
padding: 0; (optional)
mso-hide: all; /* hide elements in Outlook 2007-2013 */ (optional)

Apply these styles inline with whatever element(s) you want hidden. These styles target the email clients that accept display: none, targets Gmail by setting certain properties to 0, and targets Outlook using the special mso-hide: all style declaration.

Here's what I usually use to reset things back to normal in my media query.

display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
padding: <optional>

For images, make sure you set the width and height in the css rather than the attributes

img {
  max-height: 0;
  width: 0;
}

Then to reset them:

img { 
  max-height: none !important; 
  width: auto !important; 
}

Hope this helps.

roshodgekiss roshodgekiss, 2 years ago

jeremypeter, this is legendary. Thank you so much for sharing this! I've personally never come across mso-hide: all; - what a find. We'll be sure to pass this on, especially as so many folks struggle with hiding preheaders and the like.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jeremypeter, 2 years ago

You're very welcome. I couldn't find any good articles explaining how to mobile hide content in desktop clients besides using display:none which isn't supported some desktop clients.

So in frustration I started doing some intense research and I came across mso-hide:all. I tried it out and it worked. You don't really need to put mso-hide:all on every element. If you have your hidden content within a nested table, you just need to apply mso-hide: all; to the parent table of the hidden content and it will hide all it's child elements.

I've tested and confirmed the hidden techniques work on the following tags:

<table>
<td>
<span>
<a>
<ul>
<p>
<h1-h6>
<div>

roshodgekiss roshodgekiss, 2 years ago

Hey there jeremypeter, I've just been doing a little more testing, based on the results in this post. In essence, I've found that the following code works just as well, but doesn't require as many CSS properties:

<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>

Using the above, mso-hide: all; was redundant - so I left it out. Here are my test results - what do you think? The only caveat is that you can't apply this to <img> tags, however you can nest the image in <div class="invisible"> and that will work.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jeremypeter, 2 years ago

Hey Ros,

That does work, however, the way I build templates I have to declare line-height: 0 and padding: 0 because instead of using the <p> tag for my paragraphs, I use a class="p" instead:

<tr>
  <td class="p"></td>
</tr>

This way I can target .p and use padding top and bottom to act as margins and control the line-height as well. I feel I have a more control and consistency among email clients. I also use this technique with header elements.

So if you not using line-height or padding on any of your elements than the example you provided above will work.

Redferret, 2 years ago

Could you not just do

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

.p { 
    font-size: 12px;
    line-height: 18px;
    padding:0 10px 0 10px;
    }
</style>

<table>
    <tr>
        <td class="p" style="max-height: 0px; font-size: 0; display: none; ">Hidden</td>
    </tr>
    <tr>
        <td class="p">Not hidden</td>
    </tr>
</table>

Gmail app apologist
jeremypeter, 2 years ago

Hey Redferret,

I use Premailer which I think CM uses, when converting the styles, the line-height: 18px would get inlined with both .p selectors. So I'd need to override that by creating a .hide selector that has a line-height: 0 and add it to the class attribute of the .p I want hidden . Otherwise, you'll have an unwanted gap on the hidden .p in Gmail or any other email client that doesn't accept display: none; Here's an example of what I'm talking about

Redferret, 2 years ago

ok, so how about, using your method, apply a ".inviible" class to the the table or tr rather than the td, I'm just trying to think of more practical ways to do this.


Gmail app apologist
roshodgekiss roshodgekiss, 2 years ago

jeremypeter - great example, thanks for posting the screenshot here. I'll suggest that designers use padding: 0; line-height: 0; to taste if they come across gaps. Just to clarify, we inline CSS styles in the <head>, but don't use Premailer specifically.

Redferret - Hiding a surrounding <table> or <tr> would work, too.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jeremypeter, 2 years ago

Ok after some thorough testing, I've refactored how I hide my mobile content. I wanted to see if I could just create a basic <tr> <td> structure that would have common html elements nested within such as the <p>, <ul>, <ol>, <h1> etc... Here's example code I came up with:

<style type="text/css">

  td { font-family: helvetica, arial, sans-serif; font-size: 12px; }


  .p { padding: 10px 0 10px 0; line-height: 16px; border: 1px solid #9C9C9C; text-align: center; }

  .mobile-hide li { display: inline; mso-hide:all; }
  /* Fix Firefox Gmail and Outlook 2007-13 issue */

  .mobile-hide img { max-height: 0; width: 0; }
  /* Needed for Gmail */

  .mobile-hide { display: none; font-size: 0; max-height: 0; line-height: 0; mso-hide: all; }
  /* Apply to parent <tr> and <td>  */  


  @media only screen and (max-width: 480px){

    body[yahoo] .main-table { width: 320px !important; padding: 0 10px; }

    body[yahoo]  img { width: auto !important; max-width: 100% !important; }

    body[yahoo] .mobile-hide,
    body[yahoo] .mobile-hide img { font-size: 100% !important; display: block !important; max-height: none !important;line-height: 1.5 !important; }

    body[yahoo] .mobile-hide li { display: list-item !important; }

    body[yahoo] .mobile-hide td { box-sizing: border-box; padding: 10px; }
  }
  </style>
<body yahoo="fix">

  <table align="center" border="0" cellpadding="0" cellspacing="0" id="backgroundTable">
    <tr>
      <td>
        <table class="main-table" align="center" border="0" cellpadding="0" cellspacing="0" width="600">

          <tr>
            <td class="p"><strong>Mobile content is hidden between these two blocks</strong></td>
          </tr>
          <!-- end paragraph -->


          <!-- begin mobile content -->
          <tr class="mobile-hide"> 
            <td class="mobile-hide" bgcolor="#dedede">
              <h1>Mobile Content</h1>

              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua.</p>

              <ul>
                <li>Unordered list</li>
                <li>Unordered list</li>
                <li>Unordered list</li>
                <li>Unordered list</li>
              </ul>

              <ol>
                <li>Ordered list</li>
                <li>Ordered list</li>
                <li>Ordered list</li>
                <li>Ordered list</li>
              </ol>

              <img src="http://images.wikia.com/galaxylife/images/0/09/Whos_awesome.jpg" alt="You're Awesome!" />

            </td>
          </tr>
          <!-- end mobile content -->


          <tr>
            <td class="p"><strong>Mobile content is hidden between these two blocks</strong></td>
          </tr>
          <!-- end paragraph -->

        </table>
      </td>
    </tr>
  </table>

</body>

It consists of using 3 selectors.

The first is the .mobile-hide selector which is applied to both parent <tr> and <td> elements of the mobile content to be hidden. I originally had it on just the <td>, but Outlook 2013 was still showing the background color of the mobile content. Adding it to the <tr> fixed the issue because of the mso-hide: all; declared within.

The second is the optional .mobile-hide img selector. This is needed to keep images from appearing and breaking a layout in Gmail. Safari Gmail would break a two column layout if width: 0; wasn't declared. Do not use the width and height attributes on the <img> tag. Explorer Gmail would show the image as a little dot even when the attributes were set to 0. 

The third is the optional .mobile-hide li selector which targets all <li> items if any are being used. Gmail was creating an unwanted gap due to the nature of <li> items stacking on one another, so I set them to display: inline;. However, Outlook decided to show them since they were being display: inline; so using mso-hide: all; solved that issue.

Hope this helps.

roshodgekiss roshodgekiss, 2 years ago

jeremypeter, this is fabulous - so good to see a working example. I'll have to play around with mso-hide: all; more, as it wasn't having an impact on my tests. But it certainly sounds like you've been using in the read world more than I have. :)

Thank you so much again, this is legendary.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Step, 2 years ago

THIS IS SO GOOD! 

Thank you :)


A email developer obsessed with gym, coding, design, music, and other things he doesn't understand. Twitter - http://twitter.com/#!/stephenho1mes
jeremypeter, 2 years ago

You're welcome,

I was basing my tests off of Litmus, perhaps I should look at the native application itself for good measure.

I work with a lot of responsive emails and many of them required entire blocks of code be hidden and moved elsewhere on the mobile version. I found no solid solution on the web that worked across most major email clients, Gmail and Outlook especially. So I decided to tackle this challenge and came up with a decent fix.

roshodgekiss roshodgekiss, 2 years ago

The best :D Yes, testing natively is also a good idea, just in case ;)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
zerocents zerocents, 1 year ago

Hello,
I believe I've found a simpler solution that doesn't require much code. I'm interested in knowing if there's any scenario where the following code does not work:

<!--// The Invisible Div //-->

<style>
@media all and (max-device-width: 480px) {
*[class*="mobile-only"] {
            display: block !important;
            max-height: none !important;
      }
}
</style>

<!--[if !mso]><!-->
<div class="mobile-only" style="font-size: 0; max-height: 0; overflow: hidden; display: none">
      <!--// Everything inside is invisible to desktop //-->
</div>
<!--<![endif]-->

As far as I can tell this works as expected in all major mail clients. It should be possible to layout your content as you normally would, then wrap it with this div to hide it.


Michael Muscat
roshodgekiss roshodgekiss, 1 year ago

Oh wow, zerocents - this is fantastic. Looks pretty good to me!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Narong, 1 year ago

I realized this is old, but I've ran into a problem that I can't figure out. What zerocents contributed works great in many of the clients/devices I've tested it in, but I'm having trouble with it in iCloud.com webmail. Somehow, everything after the hidden element will get wrapped around a comment tag and not display. It's odd, but the iPad and iPhone renders it fine. Does anyone know of a work around for this? Is the iCloud.com webmail something to even worry about?

zerocents zerocents, 1 year ago

If it's a problem with the way icloud.com processes conditional comments, you could try this alternative div instead:

<div class="mobile-only" style="font-size: 0; max-height: 0; overflow: hidden; display: none; mso-hide: all">
      <!--// Everything inside is invisible to desktop //-->
</div>

The important bit is using mso-hide: all to hide content from Outlook instead of the conditional comment. Haven't tested it myself but worth a try!


Michael Muscat
Narong, 1 year ago

Thanks, Zerocents. That does fix the issue in iCloud. I really wish iCloud could handle conditional statements or comment tags better, though.

wilbertheinen wilbertheinen, 1 year ago

In addition to the above. Booking.com has written an article about it too.

http://blog.booking.com/responsive-email.html

I use this when I need to hide something for desktop.


Create a Clang!
BenjaminGraphics83 BenjaminGraphics83, 1 year ago

Maybe it's just the HTML5 guru in me, but why hide for desktop and show in mobile? 

Most of our emails should be shorter and designed to be screen agnostic, content-wise.  When doing full websites, I rarely hide content on desktop or mobile and switch on the other; I'd like to just reformat it to make sense for the screen it's on.

StG StG, 1 year ago

I've had great results dealing with images by restyling inline elements, like the anchor tag around a hero image. 

The setup:

<a href="#" class="heroimg"><img src="desktop-hero.jpg"></a>

The CSS:

@media query {
   a[class=heroimg] img { display: none; }
   a[class=heroimg] { display: block; width, height, background-image, etc }
}

Likewise you can also add mobile images by styling a span or other inline tag - they don't take up any space on desktop:

<span class="m-image"></span>
span[class=m-image] { display: block; width, height, background-image, etc }

Also, for text I've had good luck camouflaging text and entire alternative navigation structures with the background color, a font-size of 1 and building it into the vertical padding between sections, then reforming it with media query CSS.

roshodgekiss roshodgekiss, 1 year ago

@BenjaminGraphics83 - just had to chime in here. We're seeing a lot more mobile-specific content these days, for example, Eventbrite feature "Add to Passbook" links to their event confirmation emails, which can only be seen on mobile devices. We featured a "Download in the App Store" link in our newsletter, a few months previous. Both elements aren't particularly relevant when viewed in a desktop / webmail email client, but are particularly handy on mobile. I think we'll see people make more use of URL schemes in email going forward - and hiding content on the desktop will play a big part in making this happen.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
BenjaminGraphics83 BenjaminGraphics83, 11 months ago

Well, those are certainly very valid use-cases there, Ros.  But, I think as we see desktops evolving further(I can already make phone calls from any phone number on my desktop browser, thanks to Google Voice, and install any mobile app on my phone from my desktop browser), the more we are seeing the limitations between different screens vanishing.  Something to keep an eye out on :)

erichwilliam, 2 months ago

This to this guide, this one will be a big help for me, I have been into this site http://www.digitekprinting.com/business-cards a printing company.. now I am able to use new stuff.

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account