Chapter Five · Look

Responsive Design

One page for every screen: the viewport line and the mobile-first habit, media queries that answer both the screen width and the person's own settings, layouts that adapt with no breakpoints at all, and images that weigh only what each screen needs.

By the end of Chapter 4 the site has a real layout, and on a phone it does not fit: three card columns squeezed so tight that they push past the edge of the screen. The answer is not a second site for phones. It is one set of files whose layout adapts to whatever screen it lands on, and whose styles also listen to what the visitor has asked for, such as a dark screen or less motion. That is responsive design, and this chapter builds it into the site.

Four topics. One page, every screen: the viewport line that stops phones shrinking the page, why fixed widths break, writing for the narrow screen first, and testing in device mode. Media queries and user preferences: breakpoints chosen by the content, the site's grid at two widths, a dark theme from a few tokens, and reduced motion. Fluid layouts: clamp() and its relatives, a card grid that counts its own columns, and container queries. And responsive images: the right file for each screen, newer formats with a fallback, and images that wait until they are needed.

The site's Projects page at three widths: one page, three shapes, no second site

Phone

One column of cards; the nav wraps below the name only when the line is too tight.

Tablet

Two columns of cards; name and nav share one line.

Desktop

Three columns of cards; the nav in one row on the right.