Media Queries
Media queries are CSS rules that apply different styling to an email depending on the characteristics of the device or screen displaying it, most commonly the screen width. In email design, media queries are the technical mechanism behind responsive email layouts. A media query might specify: if the screen width is less than 600 pixels, switch from a two-column layout to a single column, increase the font size, and make buttons full-width. This allows a single email template to display appropriately on both a desktop email client and a mobile screen.
Media queries are embedded in the email’s HTML as CSS within a style block and follow the format: @media only screen and (max-width: 600px) { … }. The styles inside the media query override the default styles when the screen condition is met. Browser-based email clients (Gmail, Yahoo, most modern clients) support media queries well. Outlook desktop versions have limited or no support for media queries, which is why fluid design techniques using percentage-based widths are used as a baseline fallback for Outlook rendering.
For B2B email designers and developers, media queries are essential to creating emails that work well on mobile without sacrificing desktop design quality. With the majority of email opens now happening on mobile devices in most markets, an email that does not use media queries to optimise for small screens risks presenting a poor experience to a large proportion of its audience. Most email template frameworks and drag-and-drop platforms generate appropriate media query CSS automatically when building responsive templates.
What is the most common media query breakpoint for email?
The most widely used breakpoint for email media queries is 600 pixels wide. Emails are typically designed to a maximum content width of 600 pixels for desktop viewing, and the media query triggers at or slightly below 600 pixels to switch to a mobile-optimised layout. Some email designers use additional breakpoints, such as 480 pixels for very small screens, but a single 600-pixel breakpoint is sufficient for the vast majority of email designs and is the most common approach in practice.
Why do media queries not work in Outlook?
Microsoft Outlook’s desktop versions use Microsoft Word’s rendering engine rather than a standard web rendering engine. Word does not support CSS media queries at all. This means that Outlook users always see the default (non-responsive) version of an email, regardless of the screen size. This is why email developers use fluid (percentage-based) layout widths as a baseline so the email scales reasonably well even without media query support, and then layer responsive behaviour on top using media queries for clients that do support them.
Do media queries affect email deliverability?
No. CSS media queries in email do not affect deliverability. They are styling rules that influence rendering, not content signals that spam filters evaluate. The deliverability implications of email design are related to other factors: HTML file size, image-to-text ratio, authentication, and the presence of spam trigger words. Using media queries appropriately is good design practice but has no direct relationship with inbox placement.