Gmail auto resize on resposnive emails

Hi Guys new to the forum but ive read it for a while,

Basically i saw that someone on this forum had fixed the issue of the awful Gmail auto re size issue (on mobile devices) Simply adding the "min-width:" to the container works flawless for most of our clients that dont use Responsive Email design

Now the problem is we have a few that use simple responsive media queries and setting the min-width to 600px means the images of this email do not scale smaller than 600 thus breaking the responsiveness of it.

Ive tried setting the min width on one full width image only and it still makes the rest of the images not scale down regardless of what table it is in. 

My tables still collapse under each other but my images will not go smaller than 600px (ive got the images to be 100% width in a media query when the screen is smaller than 600px)


Any idea on how to get around this?

Redferret, 3 years ago

are you declaring min-width anywhere else but inline on the container?

In your media query you'll want to set your container to min-width:0 !important; so that everything display's correctly in other mobile clients.


Gmail app apologist
stoke1863, 3 years ago
Redferret :

are you declaring min-width anywhere else but inline on the container?

In your media query you'll want to set your container to min-width:0 !important; so that everything display's correctly in other mobile clients.

yea setting min width to wrapper only, Your solution seems to have sorted it so thank you!

stoke1863, 3 years ago

Actually just tested in gmail and my images are still getting resized . adding  min-width:0 !important to my mobile container did sort the problem of my email not being responsive though.

Email looks perfect on other clients but the ugly gmail auto resize really is ruining it

Redferret, 3 years ago

The min-width should only be on a fixed width container, make sure you havent declared it on a 100% width container.


Gmail app apologist
stoke1863, 3 years ago
Redferret :

The min-width should only be on a fixed width container, make sure you havent declared it on a 100% width container.


Thanks i will try that, My container is a 100% width one, Should i get the min-width: 600px to all the tables i have images in?

j05hr, 3 years ago
stoke1863 :

Actually just tested in gmail and my images are still getting resized . adding  min-width:0 !important to my mobile container did sort the problem of my email not being responsive though.

Email looks perfect on other clients but the ugly gmail auto resize really is ruining it

Hi, I'm the person that started the other thread on responsive email for Gmail.

Does it look ok in Gmail apart from it not being responsive?  Gmail ignores the CSS that make it responsive and uses its Auto resize feature so as long as it's viewable unfortunately that's all you can do.

Redferret, 3 years ago

Never fear! the issue is just that you've set min-width on a 100% width table.

You'll want to set it on atable that wraps around all your content,
I normally have a background table of 100% width, then a wrapper for my content of 600px, it's that wrapper that you'll want to set min-width on to get things looking better in gmail, don't worry about the images, if you get it right they should all scale properly.


Gmail app apologist
stoke1863, 3 years ago

j05hr thanks for the fix you are a life saver! Your fix worked for all my non responsive clients but using min width on my responsive emails just meant it wasnt responsive in any email programs, Redferret suggested adding some CSS to the media query to stop this from happening as obviously gmail will just ignore this anyway.

And thanks Redferret ill add a second wrapper to my email and put the min width there

carlclancy, 3 years ago

This has all been really helpful, but I'm still having a problem with an email I'm working on.  I'm pretty sure I've followed all the instructions on here, but the Gmail Android app is messing up my layout with Autofit.

Here's a link to my email: http://agencydublin.com/electric-ireland/edm/20.html

The problem is that Gmail is pushing the image below the column of text but not stretching it to full width as iOS does. Ideally it would look the same as the mobile version, but alternatively if I could get it looking like the desktop version that would be great. If anyone could offer any advice I'd be really grateful.

Thanks.

roshodgekiss roshodgekiss, 3 years ago

Hi there carlclancy, the responsive email code you have won't work in Gmail for mobile, I'm sorry to say. Therefore, you won't get the image "stretching" etc.

As far as general code feedback goes, you might also want to move your stylesheet into <head>. Plus, the declaration @media only screen and (-webkit-device-pixel-ratio: 2) { ... } will only work on high-res/Retina displays, so maybe worth testing with max-width: x instead of -webkit-device-pixel-ratio: 2.

Thanks, carlclancy - hopefully, we'll get this sorted out. :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098