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, 1 year 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, 1 year 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

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account