JM1
At My Whits End with Gmail!
I have been working on trying to figure out why my template is not responsive in GMAIL when so many others seem to have no issues with it. I even went as far as stripping everything out and doing a basic test to see what is going on. It continues to stip my style out of the head. The only thing I can see is that even though the documentation says it supports it, Gmail does not like the max-width attribute in the media query.
Anyone else had this problem but was able to find a solution? I'm not sure where else to look or what to do.
Hi Jessica,
Gmail does support
max-widthmedia queries. So your problem might lie somewhere else. First, which version of Gmail are you using ? On Android, Gmail doesn't support media query if you use a non Gmail account (I wrote about this here). Then make sure you don't have an@within an@in your style (more about this here) or any special characters in your<style>tags (more about this here), or Gmail will filter those. Feel free to post your code so we can help you further.Hi Rémi!
Thank you for responding. I am using both my work email (Google Work apps) and personal email (Inbox) and both are stripping my style. I just checked and I don't have any special characters and even removed all attribute selectors. I will read through all the linked information, thank you for posting them.
Here is a sample of the CSS that I have tested.
Ah, I had that problem before myself:
@media is not of type text/css at least not for gmail. Using only
<style>instead of<style type="text/css">should fix it.Ah! Thank you! I have each one in a separate
<style>and it only stripped bbpadding and and backcolor. Still not sure why it is though.update
Yea, I didn't have them completely closed.
Hi Jessica.
We managed to get Gmail responsive on our templates by removing our body specificity selector which was acting like a Attribute selector which stops Gmail reading the CSS.
from
body .cta { }to.cta { }Might be worth checking if you have a pseudo selector in there to, Gmail is now really strict with CSS. This validated in Dreamweaver but broke Gmail CSS:
.hAuto { height::auto!important; }(this was bad code should have been 1x : )Gmail does Strip all
<style>tags with what it sees as 'Errors'. Attribute selectors are some of them.A simple way to troubleshoot this is to divide your css into multiple
<style>tags. Gmail will only strip the one it has trouble interpreting.Hi Nicholas and Leo,
I already went through and removed all attribute selectors and thought that I fixed any possible mistakes but it is still stripping it. Thanks for the idea, I will be doing that next.
I posted the CSS that I was using to test below.
Update
It stripped every single style tag out still.
Thank you so much for all your help! I finally have my code completely responsive for Gmail now. What a great way to end 2016!
so what did the trick?
Using only
<style>instead of<style type="text/css">and putting each media query in it's own<style>so that it would strip just the ones that had problems.okay this did not work for us. Maybe because we're situated in the EU? Has anyone got any litmus preview that works, we can inspect?
Thank you Jessica - you saved me a lot of time. I had similar issue and thanks to you it is solved now :)
I'm curious, were you having these issues on Gmail in a desktop web browser, or in the Gmail app for Android/iOS? I haven't experienced any issues using <style type="text/css"> myself.
We use
<style type="text/css">and it works, maybe its an invisible character somewhere in CSS if it all validates