ESS
Back to Feed
Design

Responsive email layouts in 2025: what actually works across clients

html_email_wizardEmail Designer

Responsive email design has improved significantly but there are still major caveats. Here is what works reliably in 2025.

Universally supported

  • Fluid width tables with max-width and width: 100%
  • Stacking columns with display: block on table cells
  • Font size adjustments with media queries (supported in Apple Mail, Gmail app, and most webmail)

Mostly supported (use with fallback)

  • CSS @media queries — works everywhere except Gmail app on Android (non-default)
  • Flexbox in div-based layouts — works in Apple Mail and web clients, breaks in Outlook
  • Background images with background-size: cover

Still broken

  • CSS Grid — do not use in email
  • Outlook ignores most CSS — always provide MSO conditional comments
  • Gmail clips emails over 102KB — keep your HTML lean

React Email handles most of these edge cases automatically, which is why we recommend it over hand-coded HTML for responsive layouts.

#responsive#design#css
74

3 Comments

email_archaeologistEmail Historian

The Gmail 102KB clipping is the bane of my existence. We had a product catalog email that got clipped for 30% of recipients before we caught it.

18
template_tina

MSO conditional comments are ugly but necessary. We have a whole library of Outlook-specific fallbacks that we include in every template.

11
api_andreaDeveloper

React Email abstracts away most of the Outlook pain. The components generate MSO conditionals automatically. I rarely think about Outlook-specific code anymore.

14