Gmail is ignoring "display:none"

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

What to do? I开发者_开发问答n email HTML for hiding a row or div.

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

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.

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!

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.

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.

Remove the element from your source code completely.

E-Mail clients are very strict about some CSS rules. Also, seeing as no JavaScript can be executed inside the E-Mail, a display: none has no function there anyway, does it?

Thanks for this, very helpful for me.

Try max-height for Gmail this should pick it up. then use max-height:inherit !important; in the CSS this should remove the spacing issue:

<div class="mobile" style="display:none; width:0px; max-height:0px; overflow:hidden;">

@media only screen and (max-width: 480px) {
.mobile {
display:block !important;
margin: 0;
padding:0;
overflow : visible !important;
width:auto !important;
max-height:inherit !important;
}
}

In order to hide an element in an HTML email and have it work in Gmail you need to zero it out and adjust the sizing in your CSS (which Gmail will ignore).

Like so:

<style>
    @media only screen and (max-width: 480px) { 
    *[class~=show_on_mobile] {
        display : block !important;
        width : auto !important;
        max-height: inherit !important;
        overflow : visible !important;
        float : none !important;
    }
</style>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
    </td>
</tr>
<!--<![endif]-->
</table>

Additionally, the added conditional comment covers you for Outlook 07.

I have a situation in which I just had a couple of words. I used font-size:0px;.

<div style="font-size:0px">foo bar</div>

It worked for me.

Building on Dan S., another example that I use frequently.

@media only screen and (max-width: 480px) and (min-device-width: 320px) and (max-device-width: 480px) {
  p[class="hidden"] { /* I use this format to get past Yahoo Mail */
    display: block !important;
    visibility: visible !important;
    max-height: none !important;
  }
}

<td>
  <p class="hidden" style="display:none;visibility:hidden;max-height:0px;">You can't see me.</p>
</td>

With great pleasure, I would like to share this news with everyone that gmail now supports 'display:none' CSS property on testing by EmailMonks. But you need to apply a class with CSS while using 'display:none', inorder to be untouched by the inlining tool.

You can read more here

If you are experiencing issues with Gmail the fix stated in Number three worked for me as well. I applied a similar approach using div tags and overrides in line and then defining a CSS style in the head tag specific for gmail. Anytime that I want to hide something from outlook desktop I do the following: if !mso. See example below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <style type="text/css">
    So my code looks like this: 
    @media screen and (max-width : 480px) { div[id=gmail] {display:block!important;
        width:100%!important;
        overflow:visible!important;
        float:none !important;
        height:inherit!important;
        max-height:inherit!important;}
    }
    </style>
    <title></title>
    </head>
    <body>

<!--And the in the i have the following setting inline-->
<table>
<tr>
<td>
<div id="gmail" style=
"display:none;width:0;overflow:hidden;float:left;max-height:0;">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#E9E9E8"
align="center"><![if !mso]>
<tr>
<td valign="top">
<table width="133" bgcolor="#FFFFFF" style=
"border: 1px solid #c6c6c5;" cellpadding="0" cellspacing="0">
<!--My content--></table>
</td>
</tr>
<![endif]></table>
</div>
</td>
<!--This worked for me in Android 4.2 /4.1 /apple iOS
desktop web based: gmail, yahoo, Aol, Outlook.com in IE / FF and Chrome
desktop: outlook 2010--></tr>
</table>
</body>
</html>