Search code examples
htmlcssgmailmedia-querieshtml-email

Is there a workaround/alternative to Media Queries that works in Gmail app?


Ok, so after a long research I still can't find an alternative to media queries that works in Gmail as well. Is there a workaround?

Is there a way to alter colours, borders, backgrounds and other CSS rules for specific resolutions in HTML email and that code to work in all e-mail clients including Gmail?


Solution

  • Although correct that Gmail doesn't support media queries, you may still be able to do this if you build it to fit Gmail App in default version(inline styling) and use the media queries and embedded style sheets to style it on the desktop version.

    (Good beginning point for 'Gmail first' code - http://labs.actionrocket.co/the-hybrid-coding-approach-2)

    For Gmail web client you can try to use the lang 'trick': http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/.

    This option is by no means a universal solution though as it takes quite a bit of code and comprehensive testing. Plus not all stylings are accepted via media query and embedded style sheets by email clients.

    It also does mean that clients like Google Apps (which also ignores all style sheets) will display a mobile version.