Gmail IOS App ignoring media queries

Question

Gmail IOS App ignoring media queries

superpowered opened this issue 6 years ago · comments

In the cerebrus-fluid template the gmail Ios app ignores everything in the style block if this style is present:

 /* What it does: Centers email on Android 4.4 */
        div[style*="margin: 16px 0"] {
            margin: 0 !important;
        }

with:

without:

Andrew Herder · Answer 1 · Sat Apr 21 2018 00:44:53 GMT+0800 (China Standard Time)

As far as I can tell *[x-apple-data-detectors] does not cause the block to be ignored, even though it's also an attribute selector.

Andrew Herder · Answer 2 · Sat Apr 21 2018 01:02:33 GMT+0800 (China Standard Time)

My guess is that this is meant to target the very top level div .email-container ?

possible could just be changed to:

 /* What it does: Centers email on Android 4.4 */
       .email-container {
            margin: auto !important;
        }

Ted Goas · Answer 3 · Sat Apr 21 2018 04:32:48 GMT+0800 (China Standard Time)

@superpowered Hmm, using MailChimp? Is there a checkbox somewhere that says inline CSS? Does this behavior occur if CSS is not inlined?

Andrew Herder · Answer 4 · Sat Apr 21 2018 04:59:52 GMT+0800 (China Standard Time)

@TedGoas As you suspected, it seems to be a Mailchimp specific thing. Using Putsmail.com (and choosing not to inline) I did not get the same issue.

Looking at it a bit more, Mailchimp isn't inlining anything (as far as I can tell) but it does do some "Formatting" automatically, such as combining separate style blocks. And in this process it decided to strip the " fom the div[style*="margin: 16px 0"] causing it to be div[style*=margin: 16px 0], and thus incorrect.

Ted Goas · Answer 5 · Sat Apr 21 2018 05:06:52 GMT+0800 (China Standard Time)

@superpowered Cool thanks for pointing this out and following up with what was going on in MailChimp. Good to know!