Hiding Gmail Element on Desktop Version

I have been working on responsive e-mails lately and working with hiding elements on desktop versions of emails. jeremypeter has a great fix for accomplishing this.

Just wanted to throw out there that using:

max-height: 0px;

is actually a little bit simpler and works great for hiding things in Gmail. To reset the height all you need to do is:

max-height: none; 

Hope this can help someone out there!

roshodgekiss roshodgekiss, 4 years ago

Lando, you and jeremypeter are legendary! Thank you so much for this fix - I'd love to share it around with our customers... With a hat tip to you, of course :D

Thanks again for your help, this is truly useful.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
roshodgekiss roshodgekiss, 4 years ago

Hi there Lando, strangely enough, I found that max-height: none; wasn't the solution on its own. I took a hybrid approach and came up with the following:
properties:

<style>
@media only screen and (max-width: 480px) { 
.invisible { max-height: none !important; font-size: 12px !important; display: block !important; }
}

...

.invisible { max-height: 0px; font-size: 0; display: none; }
</style>

Here are my test results - what do you think? The only caveat is that you can't apply this to <img> tags, however you can nest the image in <div class="invisible"> and that will work.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098