Can't make sense of this code in mobile responsive mail

We recently changed to new Mobile Responsive templates a few weeks a go and all was working fine until a few days a go when all mails suddenly wouldn't appear in Gmail.

I did some hunting and discovered that the CSS was placed after the <body> tag. I moved this back inside the <head> tag and the email started displaying in Gmail again - have Gmail suddenly become more strict on CSS?

While moving the code back inside the <head> tag fixed that problem, it created another problem in that our header image wouldn't resize for mobile and remained it's original size.

Within the header CSS we have the following code:

body[yahoo] .mobile-img img {width: 100%;}

Previously when this was applied to the header image e.g. <a href="#" target="_blank"><img src="image.jpg" alt="alttext" class="mobile-img"></a> the image would resize to 100% of the screen with on mobile phones only.

However, when I moved the CSS into the <head> tag, the image no longer resizes. HOWEVER, if I apply the class="mobile-img" to the <a> tag, it begins to work again.

This is very confusing for me and I don't really know what's going on!

roshodgekiss roshodgekiss, 3 years ago

Hi AdMMM, this does sound very unusual, indeed! Would you be able to post your full code here? Then we can get an idea for what the issue may be, as well as run a few tests of our own. Thank you!

Get in touch with us on Twitter:
We're also on Facebook:
Redferret, 3 years ago

body[yahoo] .mobile-img img {width: 100%;}

Whats happening here is that the CSS is looking for an image within a tag with the class "mobile-img", if you want to select an image called "mobile-image" you would use

body[yahoo] {width: 100%;}

(and while we're on the subject I think the body[yahoo] bit may be redundant as Yahoo updated to not need this recently)

While it could be google staggering out changes (fingers crossed for embedded CSS support) It's probably a quirk of having styles in the body

Gmail app apologist

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