---
title: "Fit every screen · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/responsive-email
updated: 2026-10-20
licence: "All rights reserved"
---

# Fit every screen

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Make the message work on a phone first, with fluid widths and media queries only as an extra.
- How: Use a single column, or columns that stack. Set images to `width:100%` with a `max-width`, and avoid fixed widths wider than the screen. Use media queries for refinements, because some clients ignore them. The message must still work without them.
- Check: Open the test on a phone 320 pixels wide. Nothing scrolls sideways, and text and buttons keep a usable size.

Example:

```css
@media (max-width: 600px) {
  .column { display: block !important; width: 100% !important; }
}
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/responsive-email`.

- Previous: [Inline the CSS and plan for it to fail](https://agentwranglers.se/playbook/email/layout-and-accessibility/inline-css)
- Next: [Make buttons easy to tap](https://agentwranglers.se/playbook/email/layout-and-accessibility/email-buttons)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)