AD
1
Gmail App for Android Display Issue
Does anyone else experience display issue with Gmail app for Android?
I have designed a responsive email that displays fine in almost all email clients but the Gmail app.
I know that the Gmail app strips out media query, but it does not even look like the desktop version on a smaller screen. Does anyone know how to fix the width for the banner image and the cell with text?
Here is the 
And here is my code.
Media Query Portion:
@media screen and (max-device-width:480px){
*[class=mobemailfullwidth]{width:100%!important; height:auto!important;}
Inside the Body Table:
<!--Main Banner-->
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#"><img src="http://image.communication.californiacu.org/lib/fe8e12727563037a71/m/1/1408_MobileDeposit.jpg" border="0" width="600" height="280" style="display:block;" class="mobemailfullwidth" alt="Mobile Deposit"/></a>
</td>
</tr>
</table>
</td>
</tr>
<!--End of Main Banner-->
<!--New & IMPROVED CCU Mobile App-->
<tr>
<td width="100%">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ddeefe">
<tr>
<td width="100%" style="padding-left:10px; padding-right:10px; padding-top:20px; font-size:25px; line-height:30px; font-family: Arial, Helvetica, sans-serif; color: #ad1a1e; text-align:center;align:center;padding-bottom:20px;">
The <b>NEW</b> & <b>IMPROVED</b><br/>CCU Mobile App
</td>
</tr>
</table>
</td>
</tr>
<!--End of Text-->
I think I found a solution that fixes the Gmail Android App display, but it breaks the responsiveness on iPhones.
I set the td min-width to 600px for the table cell that contains the banner image.
<td style="min-width:600px;">
This way the Gmail Android App can display it like a desktop version. But it causes display issues on iPhone, although it still keeps the mobile layout, the images and fonts are much smaller than before.
Create a spacer gif that is 600X1. Put a min width of 600px. Then just hide it when the email goes responsive. It will force the email to not zoom for android, then allow it to go responsive for everything else.
Or, use a class on the TD that has the min-width in the media query to reset the min-width to "inherit". No need for spacer images...
This is the same solution I've had to use for the recent Gmail Android App issues.
Thank you so much, Chris!
This works perfectly!
Hi, is there a way to stop the responsiveness only for Android devices? I really appreciate your help.
Litmus does not have the Gmail App for iPhone any more. But I tested it on my own iPhone 5. It displays just like the desktop version on a smaller screen.