Unlike websites, emails don’t render consistently because every email client behaves differently:
Gmail, Outlook, Apple Mail, Yahoo Mail, mobile apps, and desktop apps.
Each one may interpret CSS differently.
A design that looks perfect in Apple Mail may completely break in Outlook.
That’s why media queries are such a powerful tool—they help adapt layouts depending on device conditions.
Apply these styles when screen width is 600px or smaller:
@media only screen and (max-width: 600px) {
...
}
If your email isn’t mobile-friendly: text becomes tiny, columns get squished, buttons become hard to click.
Understanding min-width vs max-width
Apply styles when screen is 600px or larger (Usually used for: desktop, tablets, larger screens):
@media only screen and (min-width: 600px)
Apply styles when screen is 600px or smaller (mobile optimization):
@media only screen and (max-width: 600px)
Design for screen ranges—not individual devices.
Breakpoints are better practices than targeting device, because there are many devices.
Bad approach: "Let me design specifically for iPhone 14"
Problem: There are too many devices.
Better approach: Use breakpoints: 320px, 420px, 600px, 768px, 992px, etc.
How to target Dark mode email design
Dark mode wasn’t a concern years ago—it’s now a major design consideration specially for Gmail, Apple Mail:
@media (prefers-color-scheme: dark)
Without it white text may disappear, colors may invert badly, branding may look wrong.
Targeting Device orientation
This detects whether the phone is portrait/landscape and its not used often, but useful.
@media screen and (orientation: landscape)
Yahoo specific targeting
This specifically targets Yahoo Mail.
@media screen yahoo
Media queries are not supported in most of the clients
Good support: Apple Mail, Samsung Email, Mozilla Thunderbird
Partial: Gmail, Yahoo Mail, Microsoft Outlook
Poor: Outlook desktop versions