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
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.
.png)