Fit every screen

Make the message work on a phone first, with fluid widths and media queries only as an extra.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

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.

Example

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

How to check

Open the test on a phone 320 pixels wide. Nothing scrolls sideways, and text and buttons keep a usable size.

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.