The issue seems fixed for me (for images at least). Can you confirm?
The issue seems fixed for me (for images at least). Can you confirm?
More here https://litmus.com/community/discussions/7248-gmail-app-android-not-scaling-images-correctly-anymore
No fix yet as of yet. I'm still keeping my fingers crossed that Google will fix it.
I've had more and more clients complaining about it this last week, but no everyone is seeing the issue. It's very odd.
Other then removing the height from images etc (which isn't a solution for me, because my clients use mail tools that automatically adds height in pixels in images once they update them) there's no fix yet.
Could you post your code so I/we can take a look?
This should do the trick (also changed the width=[number]px to width=[number] as Outlook can't read width=300px or bgcolours with just 3 letters/numbers/
<!-- FULL WIDTH CONTAINER -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"><!-- 600px CONTAINER -->
<table width="600" cellspacing="0" cellpadding="0" border="0" class="responsive-table">
<tr>
<td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> HEADER </td>
</tr>
<tr>
<td bgcolor="yellow" align="center" style="font-size: 20px; padding: 5px;"> NAV BAR </td>
</tr>
<tr>
<td bgcolor="lightblue" align="center" style="font-size: 50px; padding: 20px;"> HEADLINE </td>
</tr>
<tr>
<td><!--[if mso ]><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="300"><![endif]--><!-- Image 1 -->
<table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
</tr>
</table>
<!--[if mso ]></td>
<td width="300"><![endif]--><!-- Text 1 -->
<table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
</tr>
</table>
<!--[if mso ]></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" dir="rtl">
<tr>
<td width="300" dir="ltr"><![endif]--><!-- Image 2 -->
<table width="300" height="450" align="right" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td><img src="http://cdn.proco.com/public/images/proco/6.jpg" width="300" height="450" class="responsive-image" style="vertical-align: middle;"/></td>
</tr>
</table>
<!--[if mso ]></td>
<td width="300" dir="ltr"><![endif]--><!-- Text 2 -->
<table width="300" height="450" align="left" cellspacing="0" cellpadding="0" border="0" class="responsive-table2">
<tr>
<td bgcolor="#111111" style="padding: 15px; color: white;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
</tr>
</table>
<!--[if mso ]></td>
</tr>
</table><![endif]--></td>
</tr>
<tr>
<td bgcolor="gold" align="center" style="font-size: 50px; padding: 20px;"> FOOTER </td>
</tr>
</table></td>
</tr>
</table>
The most important reason for not using width:100% is because the editor the mails are created in adds the width and height in pixels automatically. Other reason would be that width 100% with retina images would cause problems in Outlook 2007-2016.
I have a Nexus phone myself. My colleague on iOS doesn't see the issues and our test system are still showing the correct scaling.
All I can think of is that isn't an update that's been rolled out on some phones and not on others yet.
I'm using a Gmail address in the app, so that can't be the issue. It's driving me bonkers. More and more clients are noticing it on their phones now and I have no idea how to fix it if basic code like "height=auto" is ignored.
I know the Yahoo app on iOS has the problem with the height of mobile images.
But not, it's the scaled down images that are the problem.
So my td would look like this <td class="full-width-img"><img src="deco.jpg" width="600" height="74" alt="" border="0" style="display:block;"></td>
and in the media query I set:
.full-width-img img {
width:100% !important;
height:auto !important;
display:block !important;
}
to make it scale down on mobile devices.
What happens now is that the width of the image is set to 100% on mobile devices, but the height stays 74 in this case. So it stretches the image.