@media queries being ignored for iphone

Question

For some reason, my media query is not applying when I send my email. I'm sending it from Outlook 2007 to a gmail and viewing it using an iphone 4s. I've tried sending test emails with simpler @media query rules (i.e. a media query that just changes the font color) but those don't work either. Also, I've tried sending demo html emails from tutorials (such as this one: http://www.netmagazine.com/tutorials/build-responsive-emails) but the media queries are also being ignored there I've attached the beginning of my code below: ``` Sample

Accepted Answer

Unfortunately, gmail does not support media queries (See http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails), although many do. Your best bet is to design first without media queries, and use some regular CSS to get columns to stack etc, accepting the fact that your design won't look perfect everywhere, but will still be accessible. Then you can add some media query magic to make it look fantastic on every client that supports it. See http://www.zurb.com/article/1119/create-emails-for-any-device-introducing- for a good example of such an approach, and http://www.zurb.com/playground/responsive-email-templates for some basic templates to get you up and running.

@media queries being ignored for iphone

Solution

Problem