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.
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
Thanks for this article, Jenna. Where do I put this table fix? Before which closing tag?
You’re welcome! You would put it right before the closing tag.
Cannot give this enough thumbs up. My client wanted a complex and responsive design, and it worked everywhere but Android. And there was no way I could go back and get a new design approved. This saved my bacon.
works pretty good but i am experiencing width issues on pixel android 7 outlook and gmail where it doesn’t seem to shrink the width to the min-width set. works fine on pixel android 7 yahoo. Using email on acid for testing. If I shrink the number from 700 pixels as in your example it doesn’t effect any change in the width. Wish I could upload a screenshot for visual. Can’t find any reference to this issues anywhere probably since pixel is so new.