Outlook desktop is rendering based on media queries

Question

Morning all,

I have a situation where for a client, the emails they see in the Outlook desktop app are being impacted by a media query.

The media query is of this form:

    <style type="text/css">
      @media only screen and (max-width: 600px) {
        /* Lots of responsive coolness in here */
      }
    </style>

Has anyone else come across anything similar. It is driving me batty!!!

Cheers

Jo

Dave_Roberts · Answer

Hey Jo,It looks like there's a mixed bag of support for media queries on Desktop Outlook apps. These links are to an article from last year (so there might be more current info) but it looks like everything except Outlook 2007-16 will read the media queries on desktop.https://blog.campaignmaster.co.uk/2019/02/05/outlook-com-to-support-media-queries-enhanced-accessibility/https://campaignmaster.co.uk/resources/css-support-on-email-clients/ You might think about using a mobile-first approach for the media query stuff b/c desktop is inherently more capable than mobile of rendering more complex stuff. Rather than writing the media query to a "max-width" (so basically it contains your "mobile" set of styles) you might think about using a "min-width" (so it contains your "desktop" set of styles) and instead putting the code for desktop inside a media query. I've run into a ton of headaches in the past trying to work around a desktop-first approach b/c it gets really tangled down the line b/c you're trying to do more (use a media query) with less (email on mobile is less capable).

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded