GMail ignores "display: none"

Question

I have a request that gmail ignores "display: none" - what should I do? in html email to hide arow 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 who work here with a similar problem related to the development of email for mobile / desktop computers and Gmail, if you use media queries and show / hide content, the built-in css will not be able to overwrite the built-in important announcement. Instead, you can use overflow: hidden, for example:

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

In embedded media queries, you naturally undo these styles to open 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 does not work in Gmail, otherwise it would be a better solution, given that this creates a space section under the visible content equal to the height of the div.

Answer 3

Although this was already answered, I just thought that I could find a solution that really worked for me if someone had such a problem in the future. This is really a combination of the above answers and something else that I found on the Internet.

The problem I encountered is related to Gmail and Outlook. According to the OP, the mobile content that I had would not be hidden in Gmail (Explorer, Firefox and Chrome) or Outlook (2007,2010 and 2013). I solved this using the following code.

Here is 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 is 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 above HTML code, wrapping the entire contents of these tags;

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

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

Fixes for Gmail

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

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

In any case, maybe someone will find this useful in the future!

Answer 4

Using display:none !important; fixes the problem using gmail, but then Outlook 2007 and 2010 are ignored. Work around this with display:none; display:none !important; display:none; display:none !important; Thus, gmail uses one version, and Outlook 2007 and 2010 use another.

Answer 5

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

I was creating a multi-component clear-text email with html text. In the source, html is generated from template files, and plain text is created from tagging a full email message.

To include additional text in text that is not shown in html, the easiest way is to wrap it in <div style="display:none !important> , which will be deleted when plain text is generated. For example, 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> 

HTML will display as expected (no bunch of = 's), and plain text with all div separators will be:

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

Answer 6

Remove the item completely from the source code.

E-Mail clients are very strict regarding some CSS rules. Also, seeing that JavaScript cannot be executed in E-Mail, display: none has no function, does it?

Answer 7

Thanks for that, very helpful to me.

Try max-height for Gmail, this should pick it up. then use max-height: inherit! important; in CSS this should fix 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; } } 

Answer 8

To hide an element in an HTML email and work in Gmail, you need to zero it out and adjust the size in CSS (which Gmail ignores).

Same:

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

In addition, the added conditional comment covers you for Outlook 07.

Answer 9

I have a situation where I had only a few words. I used font-size: 0px ;.

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

It worked for me.

Answer 10

Based on Dan S., another example that I often use.

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

Answer 11

With great pleasure, I would like to share this news with everyone that gmail now supports the display: none 'CSS property when testing EmailMonks . But you need to apply the class with CSS using "display: none" so as not to touch the inlay tool.

You can read here

Answer 12

If you are having problems with Gmail, the fix in the third issue also worked for me. I took a similar approach using div tags and overrides in a string and then defining the CSS style in the gmail specific head tag. Anytime I want to hide something from the outlook desktop, I do the following: if! Mso. See the 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>