responsive/no-fixed-wide-width

Why

A box with width: 960px or min-width: 500px stays that wide on a phone and at 400% zoom (a 1280px window zoomed four times is 320 CSS px), so every line has to be scrolled sideways to be read. Reflow (WCAG 1.4.10) asks that content fits 320 CSS px without two-dimensional scrolling, apart from things like data tables and maps.

Fix

Use max-width for the limit and let the box shrink: max-width: 60rem; margin-inline: auto, or width: min(100%, 40rem). Put a wide fixed size inside a @media (min-width: …) or @container query where there is room. Data tables and code blocks scroll inside their own wrapper.

Examples

/* bad */
.wrapper { width: 960px; }
/* good */
.wrapper { max-width: 60rem; margin-inline: auto; padding-inline: 1rem; }

Sources

• WCAG 2.2, Understanding SC 1.4.10 Reflow
• W3Schools, Responsive Web Design, the viewport (avoid large fixed widths)
• MDN, min()

Read it in the terminal

npx github:dawidolko/frontend-skills explain responsive/no-fixed-wide-width