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
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;"> </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.
This just saved my life. Thank you!
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! :)
Thanks for sharing
Great !
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.
THANK YOU, I thought I was going crazy when the old fix stopped working.
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?
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.
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
Yes this won’t work anymore… BUT… I’m guessing you won’t need it anymore either :)
What fixed it for me was adding !important to all font sizes
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.
This fix helped me a lot! Thanks Justin!
This doesn’t work anymore as of Dec 2018 on ios v12.1.1, gmail app v5.0.18… :(
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?