Gmail is ignoring "display:none"

Question

I have a query that Gmail is ignoring display:none.

What to do? In email HTML for hiding a row or div.

Solution 1

If style="display:none" does not work in Gmail, put style="display:none !important;" and it works in Gmail.

Solution 2

For those reaching here with a similar problem relating to mobile/desktop email development in and Gmail - if you're using media queries and showing/hiding content, the embedded css will be unable to overwrite the inline !important declaration. Instead you can use overflow:hidden, like so :

<div class="mobile" style="width:0; overflow:hidden;float:left; display:none"></div>

In your embedded media queries you will naturally undo these styles to reveal the div, and then hide the desktop version of the content.

@media only screen and (max-width: 480px) {
 .mobile {
  display : block !important;
  width : auto !important;
  overflow : visible !important;
  float : none !important;
 }
 .desktop {
  display : none !important;
 }
}

Unfortunately the height property doesn't work in Gmail, otherwise it would be a better solution, given that this creates a section of whitespace below the visible content equal to the height of the div.

Solution 3

Though this has already been answered I just thought I'd chip in with a solution that really worked for me in case anyone has this problem in the future. It's really a combination of the above answers and something else that I found online.

The issue that I was having was for Gmail and Outlook. As per the OP, the mobile content I had would not hide in Gmail (Explorer, Firefox and Chrome) or Outlook (2007,2010 & 2013). I solved this by using the following code.

Here's my mobile content:

<!--[if !mso 9]><!-->
<tr>
  <td style="padding-bottom:20px;" id="mobile">
    <div id="gmail" style="display:none;width:0;overflow:hidden;float:left;max-height:0;">
  <table cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td>
    <img src="imageurl" style="border:0;display:block;width:100%;max-height:391px;" />
          </td>
    </tr>
    <tr>
          <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;padding-top:15px;padding-bottom:15px;font-family:Arial,Helvetica,sans-serif;font-size:22px;color:#1c1651;padding-left:10px;padding-right:10px;text-align:left;" id="mobiletext" align="left">We're now on Twitter</td>
    </tr>
    <tr>
      <td style="border-left-style:solid;border-left-width:1px;border-left-color:#d5e1eb;border-right-style:solid;border-right-width:1px;border-right-color:#d5e1eb;background:#f7fafd;font-family:Arial,Helvetica,sans-serif;font-size:13px;color:#585858;padding-left:10px;padding-right:10px;text-align:left;line-height:24px;" id="mobiletext"><a href="#" style="text-decoration:none;color:#0068ca;">Follow us now</a> for some more info.
      </td>
    </tr>
    <tr>
      <td>
        <img src="imageurl" style="border:0;display:block;width:100%;max-height:37px;" />
          </td>
    </tr>                               
  </table>  
    </div>
  </td>
</tr>
<!--<![endif]-->

And here's the CSS:

@media only screen and (min-width:300px) and (max-width: 500px) { /* MOBILE CODE */
*[id=mobile] {
    width:300px!important;
    height:auto!important;
    display:block!important;
    overflow:visible!important;
    line-height:100%!important;
  }
*[id=gmail] {  
    display:block!important;
    width:auto!important;
    overflow:visible!important;
    float:none !important;
    height:inherit!important;
    max-height:inherit!important;
  }

Fixes for Outlook

So as you can see from the HTML code above, wrapping all the content in these tags;

<!--[if !mso 9]><!--> <!--<![endif]-->,

hides the content for the Outlook versions that I mentioned. For all the other email clients, the display:none; works just fine. I also saw that you can also use mso-hide:all to hide things for Outlook but I thought this was a little easier than placing that code inline.

Fixes for Gmail

Now for Gmail, you can see that I created a 'special' id called gmail which I then applied to a div within the <td>. I tried COUNTLESS other methods of using things such as overflow:hidden inline and all manner of other combinations but this is what worked for me.

So in short, wrapping the content in the <td> in a <div> which then contains the overflow:hidden,width:0 etc then overwriting these styles by giving the div an id of, in my case gmail solved the problem for me.

Anyway, maybe someone will find this helpful in future!

Solution 4

Using display:none !important; resolves the issue with gmail but it is then ignored by Outlook 2007 and 2010. Got round this using display:none; display:none !important; That way gmail uses one version and Outlook 2007 and 2010 use the other.

Solution 5

It has been said already display:none !important; works, but no one has stated a use case for this so I'll give one I was working on when I found this question and solution on SO.

I was creating a multi-part email with plain/text and html. In the source, html is generated from template files, and the plain text is created from stripping tags from the full e-mail.

To include additional text in the plain-text that isn't shown in the html, the easiest way is to wrap it in a <div style="display:none !important> that will be stripped out when the plain-text is generated. For instance if this is your template:

<p>This is part of an html message template.</p>
<div style="display:none !important">=================================</div>
<div style="border-top:3px solid black;margin-top:1em;">
   <p>This is some footer text below a black line</p>
</div>

The HTML will render as expected (no bunch of ='s) and the plain-text with all the div's stripped will be:

This is part of an html message template.
=========================================
This is some footer text below a black line.

View more solutions

Comments

[Klaus Byskov Pedersen]

If you want certain things to be hidden in an email, the easiest way is to not include them at all.

[leppie]

What query? Please explain more.

[Pekka]

@leppie I think he means a support request

[Sagar]

Found the answer Its working for gmail style="display:none !important;"

[user1111929]

Or even simpler: to hide the backup text if the receiver has no html support in their client and sees an unreadable bunch of html.

[Jasper]

Just my opinion: Pekka's answer makes more sense. If you are hiding the element, just get rid of it all together.

[Martijn Pieters]

Welcome to Stack Overflow! Please don't add "thanks" as answers. Invest some time in the site and you will gain sufficient privileges to upvote answers you like, which is the Stack Overflow way of saying thank you.

[Twistar]

Many mobile devices support media query's, so if you are designing a responsive this has several use cases.

[Kus]

Thank you! This solution worked for me best. The ones above left me with white space where the hidden element was.

[greatwitenorth]

note the above should be read display and not disply. I tried to edit the comment but stackoverflow won't allow edits of less than 6 chars.

[Leandro Alves]

@Jasper You may be hidding for using in a different media query. Even if Gmail doesn't support it, other mail apps do so, like iOS native app.

[Travis]

@luke THANK YOU! To anyone that is reading this in the future like i just did. If you want to get rid of that ugly white space. just do a line-height: 1px; then in your media query add in the proper line-height. I found that it worked best on the TR instead of the div or td.

[Luke]

Just to make note, we discovered using this method for having a mobile version of an email was not ideal, since forwarding the email in Outlook to another person would display both the mobile and desktop content. Now we try and build emails only by using display:block on table elements (tr, td) to adapt them for mobile screens.

[davidcondrey]

This is not a good answer. Gmail does not respect display:none. The only way this works is if you put declare display:none!important inline on the element. But if you do that, you won't be able to overwrite it.

[Avishai]

Works great if you want to embed some parseable info that shouldn't be displayed to the user.

[jpw]

Extraordinarily great answer to the question. Thanks for posting this a year later - it saved our bacon. The Gmail/Outlook email css idiocy has been a real drag but this solved it nicely.

[zik]

You are most welcome, I'm glad this has helped, figuring it out was like finding a goldmine!

[Jamey]

What does JavaScript have to do with display: none?

[Pekka]

@Jamey what point is there in hiding an element when you're not going to display it under some circumstances? Support for Media Queries in clients is dismal. litmus.com/help/email-clients/media-query-support how else to do this than with JS?

[Pekka]

@Twistar and GMail allows for media queries in E-Mails?

[Jamey]

@Pekka You might want to hide something completely under certain circumstances. But you're right, gmail doesn't support media queries, so it's a kind of useless for gmail specifically.

[Pekka]

@Jamey but I can't see a reason to have an element in an E-Mail that I don't want to show. (Or at least no legitimate reason. Maybe it's possible to smuggle a tracking pixel in that way, no idea. But that would be really evil!)

[Vigrant]

I'm using it to create a div with preview text.

[Riveascore]

YOU ARE A GENIUS!!!! This needs to be the top voted best answer for real. I've tried about 7 different approaches, all of them requiring massive class additions to my css, and all in all, not working across all email clients. This was so simple and WORKED!!!!!

[Erwin Kaddy]

tested this, it can hide, but it cannot show. i think the reason is because media queries is not supported in gmail. so anything inside @media only screen and (min-width:300px) and (max-width: 500px) is ignored by gmail.

[Crates]

For the record, this workaround no longer appears to be functional. Gmail is trying VERY hard to prevent people from conditionally detecting their platform.

[Some Developer]

This might work with gmail (and you can overwrite it with classes) but it does not work in outlook anymore as it dislikes !important

[Azan Abrar]

This is some genius work! You really did an outstanding Job. This is the most generic and best possible solution I came across mainly because you took care of responsive styles as well as structured it well to handle the worst possible case! Thumbs Up Man!!!

[crmpicco]

Your markup looks odd, what does the markup look like for MSO? Surely you're not duplicating it.

[davidcondrey]

My standard template is here if you'd like to review it: github.com/dcondrey/html-email/blob/master/template/… It will render predictably across more clients than any other template you'll find.

[crmpicco]

Do you have tables or rows within your email template that you show/hide for desktop/mobile? I have a bunch of tables with classes like hide-for-desktop and hide-for-small which is part of the Zurb Ink documentation. I don't see any examples of handling this sort of setup for Outlook and GMail in your standard template. Generally I am finding my template works in either GMail or Outlook, but not both.

[vard]

It still works on Gmail, but you need to use max-height: 0 and use it on a block level element (a div - it is not working on a table or a table row).

[Adam Loving]

Yes! After trying several variations, setting max-height: 0 worked for me!

[TommyAutoMagically]

This may have been a good answer several years ago, but nowadays, the issue is more nuanced. We design our emails "mobile first", and then use media queries to provide a large-screen-friendly version where possible. display: none comes in handy with hiding certain elements in the large-screen version.

[István Ujj-Mészáros]

You can use mso-hide: all; for Outlook 2007-13

[István Ujj-Mészáros]

Thanks for that answer, really helped a lot, it seems to work reliable.

[Eoin]

@ErwinKaddy perhaps you are discussing Gmail App vs Gmail web