Support for media queries varies by email apps/programs. In some cases, even though an email client doesn't support media queries, it might still have its own proprietary mechanism for trying to render an email in the "best looking way" that it can (including things like increasing font size to a readable size, etc.).
For further information regarding media queries and supported email clients, please visit https://litmus.com/help/email-clients/media-query-support/
To maximize compatibility, the following best practices are encouraged:
- Keep email layouts as simple as possible.
- Rely on table-based layouts instead of using complex CSS
- Take measures to allow "failing gracefully". For example, if you are using white text against a dark background image, if an email program fails to show the background image, the white text will likely be shown against a white background. To prevent this, set a background color for the HTML element that contains the text that is similar in color to the background image.
- If you choose to use CSS layouts and style, make sure to apply inline styles (i.e. the style attribute is applied inside the opening and closing < > for the opening HTML element tag). Many email readers will ignore any CSS that's not presented inline.
- Once you have a base email design/layout that works consistently across most email readers, use that email design as a template from which to build other emails.
Refer to the following Knowledgebase article for other troubleshooting steps specific to Outlook Formatting Issues.