Gmail Supports display:none and Gmail iOS Font Fix Update

The folks over at EmailMonks discovered that Gmail has started to support the display:none property. Gmail has always supported display:none!important, but not display:none. I will update this article shortly of why this is a positive development for email designers but first…

Gmail iOS Font Fix Update

Gmail Font Size Increase Message

One of my most often used hacks is the dash hack or   hack to prevent the Gmail iOS app from drastically increasing the font size for certain emails. The technique took advantage of the fact that Gmail doesn’t support display:none. With Gmail supporting display:none this technique no longer works.

Thankfully we can leverage the fact that Gmail doesn’t support classes and ids to arrive at an alternative fix.

Paste the following code in your email body (note no more display:none inline). Place it at the bottom of your email – you can place it at the top if your email is long as Gmail may not load the full email. Naturally make sure you’re not using the class gmailfix for something else :)

<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
</div>

Then put this in the <head> of your email.

<style>
.gmailfix {
 display:none;
 display:none!important;
}
</style>

Technically display:none is sufficient, but some versions of Yahoo! is finicky so we add display:none!important for good measure.



Subscribe to the #EmailGeeks Newsletter

Latest Comments
  1. Steve Deckert

    This just saved my life. Thank you!

  2. Jamie

    Thanks for this info! I was wondering why the previous fix wasn’t working today as I was proofing emails. Anyway, this was very helpful and timely! :)

  3. Karma Dorjee

    Thanks for sharing

  4. LOJOU Corinne

    Great !

  5. Ryan

    Didn’t work for me.

    My issue with these fixes is that gmail will update continuously, and things will eventually break. Luckily I found this issue right as it happened, and caught it before too many users were affected.

    My advice is to make your emails more simple. Rather than using media queries for dynamic display content, optimize your emails one size fits all (leaning towards mobile). It’ll save you headaches.

  6. Sara

    THANK YOU, I thought I was going crazy when the old fix stopped working.

  7. AJ Sipin

    Unfortunately, this new hack also impacts gmail app on Android devices. I use the spongy method to “stack” email columns for Gmail app on Android. But now, with this new hack, it’s also forcing Android Gmail app to display the desktop version, making spongy basically useless. Any thoughts on this?

    • Justin

      Unfortunately this technique doesn’t work with hybrid/scalable/spongy designs. One possible solution is to identify which font increase is breaking your design and setting the font size with !important.

  8. Sebastian

    I guess this won’t work anymore as Gmail is stopping to remove inline style tags: https://googleappsdeveloper.blogspot.ch/2016/09/your-emails-optimized-for-every-screen-with-responsive-design.html

    • Justin

      Yes this won’t work anymore… BUT… I’m guessing you won’t need it anymore either :)

  9. Vincent Tobiaz

    What fixed it for me was adding !important to all font sizes

  10. Mimi

    Has anyone else noticed some strange renderings lately with the Gmail App on iOS 10? I’m using this gmail fix, but for some of our emails with 2 column layouts, it’s like emails will show up as half responsive. Like it’ll show the responsive version, but will only take up half the screen.

    Just wondering if anyone else has been experience any funkiness on the latest Gmail iOS App version.

  11. Nicole O'Neal

    This fix helped me a lot! Thanks Justin!

  12. Coral

    This doesn’t work anymore as of Dec 2018 on ios v12.1.1, gmail app v5.0.18… :(

  13. Bhanu Shankar

    I couldn’t get this. Say I have a menu of 8 placed horizontally in my email and on gmail app 2 of the menus should be hidden? How do I use your code to get this solution?

Leave a Reply

Your email address will not be published. Required fields are marked *