Chapter 11 — Responsive CSS and Pseudo-elements

Change layouts when content needs room, keep images inside responsive containers, and add optional generated decoration.

New concepts

@media rules, min-width / max-width and Level 4 range syntax (width >= / width <), max-width: 100%, height: auto, aspect-ratio, object-fit, srcset/sizes, picture, loading="lazy", ::before, ::after, and content.

Read the Responsive CSS gauge

What changes after Grid?

Grid can respond automatically with flexible tracks. Media queries handle the moments when the design itself must change. Responsive image rules protect or crop media, while pseudo-elements add decoration without adding meaningless HTML.

Lessons

  1. 1. Mobile-first media queries
  2. 2. Responsive images and image slots
  3. 3. ::before and ::after
  4. 4. Combined responsive feature
  5. 5. Srcset, picture, and lazy loading

Checkpoint

Build a feature that stacks at narrow widths and forms columns above a content-driven breakpoint. Include one intrinsically scaled image, one cropped aspect-ratio image, one srcset or picture example, and an empty-content pseudo-element used only for decoration.