Skip to content

Instantly share code, notes, and snippets.

@Riveascore
Last active April 19, 2017 04:46
Show Gist options
  • Save Riveascore/10549334 to your computer and use it in GitHub Desktop.
Save Riveascore/10549334 to your computer and use it in GitHub Desktop.
Currently trying to use inlined "display: none;" doesn't work for Gmail, so here's the best workaround (of about 3 different approaches I tried).
<!--
You can't do position absolute + visibility/opacity in gmail
display: none; only works if you inline it as !important, but then this destroys the functionality for
all other clients, this workaround has been working wonders for us!!!
-->
<style>
div.gmail {
display: block;
width: 0;
overflow: hidden;
float: none;
height: 0;
max-height: 0;
}
@media only screen and (max-width: 600px) {
table[class="body"] div.gmail {
display: block !important;
width: auto !important;
overflow: visible !important;
float: none !important;
height: inherit !important;
max-height: inherit !important;
}
}
</style>
<!--[if !mso]><!-->
<div class="gmail">
<!-- This workaround is only viable when #gmail's next direct descendant is a table -->
</div>
<!--<![endif]-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment