css - Gmail Responsive Email - Media Queries - Style Tag

Question

See here: Responsive emails on Gmail app (Android)

I'm trying to build a responsive email for use in all email clients. Gmail is stripping my style tags from the head/body and the queries are therefore also stripped.

I've tested using Email On Acid and Gmail just displays both versions!

What is the solution here:

1) Using a framework? - even these use style/media queries

2) External stylesheet - is there any way to make this work?

Has anyone found a permanent solution for this issue. Any advice would me much appreciated! :)

Answer 1

Gmail requires that all styles be inline, It will strip out all media queries and really anything that you have in the head... If you have not coded this way i would suggest running your entire email through this http://beaker.mailchimp.com/inline-css Might solve the issue right out.

Also worth mentioning if you are not using attribute selectors with your media queries then it is going to look funny in yahoo i usually start responsive emails from here

http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978