ME3
New height bug in gmail within a media query
Hi,
I manage marketing emails for my employer. Our email layout broke in the last week and I suspect it is a rendering change at Gmail's end.
My layouts relied on overriding inline heights and widths on images within a media query.
Now height:auto isn't working.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.1 Template</title>
<style>
@media screen {
img {width:100%;height:auto}
}
</style>
</head>
<body>
<img width="1" height="1" src="http://www.fastersmartereasier.com/noindex/email-project/imgs/n1.jpg"/>
</body>
</html>
The above was working a week ago. It is currently staying at 1px.
I don't know whether to remake our entire suite of emails, or see if Google fix it.
Bit of a bind.
What does everyone else think?
Mike
Hi Mike,
It seems that this bug is back in the Gmail Android app, and Gmail Android app only. What happens is that Gmail transforms
height:autointomin-height:auto, which doesn't make sense, so theheightattribute in your HTML is applied. A solution is to avoid declaring theheightof your image in the<img>tag.This worked great in my testing. Hopefully, they fix it soon, these types of bugs are a pain for the community.
This worked for me, thank you!
that's a pain. I am using height=1 width=1 to hide images in outlook. Recently that is killing my gmail android layouts. I guess i need another way to hide the image in outlook. Not sure why mso-hide:all isn't taking
this double height attribute hack seems to fix it for my usage case
https://litmus.com/community/discussions/4025-height-auto-hack-for-fluid-retina-images-in-gmail
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.
The issue seems fixed for me (for images at least). Can you confirm?
Seems to be fixed now. The broken ones in my inbox remain broke, but a test from a colleague just came through and is working
Add !important to the CSS and a style attribute to the image element with the width/height declared there.
I fixed it writing height="auto" from the start and declaring the height in a style also.
<style>@media screen { .mob-autoheight { width: 100% !important; height: auto !important; } }<img src="xx.jpg" width="1" height="auto" style="width: 1px; height: 1px;" class="mob-autoheight">Not working, we have already tried this...
Same issue mike, we have in the <TD>, we are using the height attribute to maintain the content in 3-column sections.