Definition
A media query is a CSS rule that applies styles conditionally based on the device or email client's properties, most commonly viewport width. In email development, media queries are embedded in the <style> tag and enable responsive behaviour — changing layouts, font sizes, button sizes, and hiding or showing content depending on screen size.
Media query support in email clients has improved significantly but is still not universal. Apple Mail, iOS Mail, Samsung Mail, and Outlook.com support media queries. Gmail (web and mobile) strips embedded styles, including media queries. Outlook desktop versions before 2019 do not support media queries at all. This is why fluid/hybrid design is often combined with media queries for maximum compatibility.
Common Email Media Queries
@media only screen and (max-width: 600px) {
/* Mobile styles */
.container { width: 100% !important; }
.column { width: 100% !important; display: block; }
.hide-mobile { display: none !important; }
.button { width: 100% !important; }
}
Best Practices
- Use
max-width: 600pxas your standard mobile breakpoint - Combine media queries with fluid design for broader client compatibility
- Always use
!importantin email media queries to override inline styles - Test media query behaviour in Gmail, where embedded styles are stripped
- Use multiple breakpoints only when necessary — 600px is sufficient for most emails
- Place media queries in the
styletag within theheadof your HTML - Avoid shorthand media queries — use
only screenfor specificity
Related Glossary Terms
Border
Border is a CSS styling property used in email design to define visible lines around elements such as tables, images, buttons, and content sections, contributing to visual structure and hierarchy.
Fluid Design
Fluid design (also called hybrid design) is an email layout approach that uses percentage-based widths and max-width constraints to create emails that adapt smoothly across screen sizes without relying on media queries.
Padding
Padding is the CSS spacing property that creates space inside an element between its content and its border, essential for readable email layouts with proper whitespace and visual breathing room.
Pseudo-Element
A pseudo-element is a CSS keyword that styles a specific part of an element — such as ::before, ::after, or ::first-letter — used in email to create design effects like decorative bullets, separators, and initial caps without additional HTML markup.
Frequently Asked Questions
Apple Mail (iOS and macOS), Samsung Mail, Outlook.com, Thunderbird, and the default Android Mail app support media queries. Gmail (web and mobile) and Outlook desktop (2007–2019) do not support media queries, or strip them. For clients that do not support media queries, the default (desktop) styles apply.
Use a hybrid approach: build a fluid base layout using percentage-based tables that adapt naturally, and layer media queries on top for clients that support them. This ensures the email looks acceptable on all clients and optimised on modern clients.