The course page has a Flexbox header and a Grid of feature cards. Now we make the whole thing responsive, and we do it the way I recommended in this module: start narrow and work upward, adding a breakpoint only where the content asks for one.

Open the page at the smallest width you can use, around 320px. Everything should already be readable. If it isn’t, fix that first, with no media query.

Keep what already works

The card grid is intrinsic. auto-fit and minmax() already handle every width. Leave it alone. The header wraps thanks to flex-wrap. Leave that alone too.

Add one deliberate breakpoint

The hero is the one part that benefits from a real layout change. Stacked on narrow screens, title next to the image when there’s room:

.hero {
  display: grid;
  gap: 2rem;
}

@media (min-width: 48rem) {
  .hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}

Drag the window to find your own number. Wherever the stacked hero starts to look too wide and empty, that’s the breakpoint, not 48rem because I said so.

Flexible media and focus

Make sure the base rules from the foundations lesson are in place:

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

a:focus-visible,
button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

The image rule stops any picture from overflowing a card. The focus rule gives keyboard users a clear ring on every link and button, with a small offset so it doesn’t hug the text. Also check that buttons and links are big enough to tap, at least around 44px tall on touch devices.

Respect motion preferences

If you added the hover lift from the previous lesson, add the reduced-motion rule next to it. The page should feel complete with the motion off.

The test list

Responsive work is done when the page survives all of this, not when it matches one screenshot:

narrow and wide windows
200% browser zoom
long headings and navigation labels
keyboard-only navigation
reduced motion
light and dark browser preferences if your design supports them

Go through the list one item at a time. For the long-content test, change the site name to a full sentence and one card title to two lines. For the zoom test, watch for horizontal scrollbars. For the keyboard test, hide the mouse and Tab through the whole page.

When you find a problem, resist the urge to add a breakpoint. Ask first whether a flexible value, min(), wrapping, or gap fixes it. Most of the time it does.

The quiz below covers the responsive and modern CSS concepts from this module.

Quick check

Result

You got of right.

Finish the responsive page