Content reflows at 200% zoom without horizontal scrolling

Users with low vision frequently zoom to 200% or more using browser zoom. Fixed-width layouts that do not reflow at this zoom level produce horizontal scroll, force users to pan back and forth to read lines, and can overlap or truncate content. WCAG 2.2 SC 1.4.10 (Reflow) is a Level AA requirement: content must reflow to a single column at 320 CSS pixels equivalent (the width at 400% zoom on a 1280px screen) without loss of content or functionality.

Replace all fixed pixel widths with fluid units and use responsive breakpoints so content stacks into a single column at narrow widths.

/* Remove fixed widths from layout containers */
.container {
  /* Before */
  /* width: 1200px; */

  /* After */
  width: 100%;
  max-width: 80rem;
  padding-inline: 1rem;
}

/* Stack multi-column layouts at narrow widths */
@media (max-width: 640px) {
  .two-col {
    display: block; /* or flex-direction: column */
  }
}

Test by zooming to 200% in Chrome (Cmd/Ctrl + ) and scrolling horizontally. No horizontal scroll should appear. Avoid overflow-x: hidden on body as a mask — fix the underlying layout instead.