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.

Answer 1

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.

Answer 2

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

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

Answer 4

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

Answer 5

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.

Answer 6

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?