New email editor seems to be removing css media queries when sending test emails, anyone else experiencing this? | Community
Skip to main content
J
John_Wallace
Level 4
June 27, 2019
Question

New email editor seems to be removing css media queries when sending test emails, anyone else experiencing this?

  • June 27, 2019
  • 3 replies
  • 4106 views

We were recently forced to switch to the "new" email editor and I have noticed that sending test emails with exact same code as when you using the original email editor, that our mobile styles are no longer being recognized.  It looks the way it should in the preview in both the mobile and desktop views.  I also ran the code through Email on acid and it appears correctly in all the mobile email clients.  This leads me to think Marketo is removing our media queries, I am wondering if I am missing something or need to enable some sort of feature? @Sanford Whiteman do you have any idea why this might be happening?

Desktop preview

Mobile preview

Actual email on mobile

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

3 replies

J_Grant_Gray
J_Grant_Gray
Level 3
June 27, 2019

@Grégoire Michel‌ wrote up a piece on email editor 2.0

https://nation.marketo.com/community/champion/blog/2016/06/18/testing-the-email-editor-20-great-stuff-a-few-glitches-and-room-for-a-v21

Dave_Roberts
Dave_Roberts
Level 10
July 1, 2019

Hey John,

I've never run into a situation where EM 1.0 supported media queries and 2.0 did not - Im not sure that there's a "Marketo component" that would support that since they are usually nested within a <style> element which isn't something that needs to be processed specially on the Marketo end. 

I have run into situations where specific email clients (e.g. Outlook, Android) just don't read media queries. In most email clients when code isn't "recognized" it's just ejected and doesn't show up in the rendered code. A good example of this is Outlook for desktop - it'll strip out any code that Outlook doesn't like so that if you were to forward an email (from Outlook) to a friend who used another client (say gMail) it wouldn't look as good as if you were to send it directly from Marketo to the gMail address b/c all of styles that gMail might read would have already been stripped by Outlook. 

There's a few good articles on this by Jason Rodriguez of Litmus (the dude know his email stuff!) that cover the support you could expect for both Desktop and Mobile environments.

https://litmus.com/blog/understanding-media-queries-in-html-email

https://litmus.com/community/learning/49-which-mobile-email-clients-support-media-queries

There may be more support charts out there on the internet and these can change from time to time. 

If you wanted to double check to see if Marketo is actually stripping your media queries, you could open up an email (Edit Draft) and click the Preview button in the upper right. Inspecting this code will let you take a peek at what's getting rendered once Marketo puts all the tokens and variables into play. You should be able to find your <style> with the media queries somewhere between the <head> and </head> elements in the inspector.  

I did a quick test with one of our emails in Preview Mode and was able to see the media queries coming thru in the <style> tag. Note: When you use the inspector, this preview is a nested iFrame and the Marketo shell is coded around it. You'll want to look at the <head> element inside this iFrame to check the <style> for your media queries. The easiest way to find it might be to right-click and inspect something at the top of your email and then slowly scroll up from there.

    J
    John_WallaceAuthor
    Level 4
    August 30, 2019

    I take it back, this is an email client issue.  I was using the Gmail mobile app that at one point used media queries but as of late, seems to be ignoring them.  I re-tested the same email with Apple Mail and it appears as expected.

    Terms & ConditionsAccessibility statement

    Loading footer...