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

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

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

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!