The Gmail app for Android has poor support for CSS and doesn’t support media queries. This can result in your responsive email breaking in the Gmail app for Android. Here is a quick fix you can put in place to force Gmail for Android to display the full (desktop) version of the email.
without the fix
with the fix
Place this HTML code right before the closing
|
1 2 3 4 5 6 7 |
<table cellpadding="0" cellspacing="0" border="0" class="hide"> <tr> <td height="1" class="hide" style="min-width:700px; font-size:0px;line-height:0px;"> <img height="1" src="spacer.gif" style="min-width: 700px; text-decoration: none; border: none; -ms-interpolation-mode: bicubic;" /> </td> </tr> </table> |
Add this to the existing media query within your email.
|
1 |
.hide {display:none !important;} |
Your media query should look something like this:
|
1 2 3 |
@media only screen and (max-width: 480px){ .hide {display:none !important;} } |
Email me, send me a tweet @jennamolby, or leave a comment
Welcome to my blog, where I share, tips, tricks, thoughts and solutions that I learn in my daily life as a Marketing Operations leader.
12 comment(s)
Konstantine Gegeshidze
It was indeed great hack till this 14th of September, Time to Rock new killing article about the CSS media quires support, let me know when you wrote blog about that.
Chris
This is genius. Thank you so much!
Wesley
Thank you very much! I have been looking for this "hack" for a long time.
Jenna Molby
Hi Anton, The Gmail App on Android doesn't allow media queries. Instead, Gmail will automatically re-size the message so that the email shrinks to fit the screen dimensions of the device. The issue is how the Gmail App renders the TABLE tags. Any table width attributes (in pixels or percentage widths) are now ignored, which causes the size of the table to be controlled by elements within the cells (text and images). Adding a transparent spacer image with a fixed width will force the table to keep its size and prevent the collapsing of the content.
Anton
Could you elaborate a bit about why this works, and what is happening? I don't really understand it. And your spacer.gif, is that just an invisible image?