Responsive layout foundations

Begin with a fluid single column

Let content use available space while maintaining a readable maximum.

.shell {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

img {
  max-width: 100%;
  height: auto;
}

Add columns only when the content has room, not because a particular device name appears in a design.

@media (min-width: 48rem) {
  .cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

Reflow acceptance

At 320 CSS pixels and 200% zoom, ordinary page layout should not require horizontal scrolling. Code and genuine data tables may scroll inside clearly bounded containers.

How browsers actually behave

The layout viewport supplies the available CSS-pixel width. Without a viewport meta declaration, mobile browsers may use a wider virtual viewport and scale the result down, making a desktop layout appear tiny instead of truly reflowing. With the standard viewport setting, percentages, flexible tracks, intrinsic sizes, and media queries resolve against the actual viewport and containing blocks.

Grid and flex items have automatic minimum sizes. A long URL, code token, image, or child with white-space: nowrap can therefore force a track wider than the screen. minmax(0, 1fr), min-width: 0, wrapping, and bounded overflow are targeted fixes; hiding page overflow only conceals the inaccessible content.

Decisions and trade-offs

Choose breakpoints where content becomes crowded, not from a device catalog. Mobile-first rules keep the baseline simple, while min-width queries add arrangement when space exists. Container queries can make reusable components respond to their own width, but viewport queries remain appropriate for page composition.

Avoid fixed heights for text-bearing cards and controls. Text expansion, translation, user fonts, and zoom invalidate the assumed number of lines. A maximum content width can improve reading, but it should coexist with flexible inline margins and full-width behavior on narrow screens.

Accessibility consequences

Reflow lets people enlarge content without tracking long lines both horizontally and vertically. Controls must remain reachable and labels must stay adjacent to their fields. Sticky headers, cookie banners, and bottom action bars can consume most of a magnified viewport even when the document technically fits, so evaluate what remains visible during real tasks.

Touch targets need space, but spacing alone does not create a useful order. When columns collapse, DOM order becomes the reading, keyboard, and screen-reader order. Author source order for the narrow experience first and avoid CSS reordering that tells a different story.

Common failures and fixes

• The whole page scrolls sideways. A child has a fixed or intrinsic minimum width. Inspect the widest element and make that component flexible.
• Cards become unreadably narrow. A fixed column count persists too long. Use an auto-fitting grid or collapse at the content-pressure point.
• Text overlaps controls. A container has a fixed height or absolute positioning. Restore normal flow and intrinsic sizing.
• A mobile page looks like a shrunken desktop. The viewport declaration is missing. Add it in the document head and retest real devices.
• A table is clipped. Page overflow is hidden. Put genuine tabular overflow in a labeled, focusable local wrapper instead.

Verify it

Start at 320 CSS pixels, then drag the viewport slowly wider and watch for the first content-pressure failure instead of checking only preset devices. Test 200% browser zoom, 200% text-only zoom where available, long unbroken strings, large default fonts, and both portrait and landscape. Use the Layout panel to identify grid or flex minimums. Complete the primary task by keyboard at the narrowest width and confirm focus is never obscured by sticky content.

Exercise and next step

Test at 320, 768, and 1440 pixels. Find the first width where content becomes uncomfortable, then place the media query there instead of copying a device breakpoint. Next, inspect the box model and specificity so spacing and breakpoint fixes do not rely on accidental cascade wins.

Boundary of this lesson

Responsive layout does not mean reproducing every desktop arrangement on a smaller screen. Some information may need a different grouping, control order, or disclosure pattern, but the same task and facts must remain available. A handful of viewport screenshots also cannot prove reflow: long translations, large user fonts, validation errors, virtual keyboards, and dynamic content change the pressure. Keep the layout rules intrinsic where possible and make the slow viewport sweep part of every substantive component review.

Repeat the sweep after opening menus, revealing validation messages, and increasing the browser's default font. These states often introduce the widest real content after the initial screenshot has passed. Record the first failing width and the exact content that caused it so the repair can become a stable regression case.