Media Queries

Start with a usable narrow layout, then enhance it when the content has room.

Resize this page across 48rem

This message changes colour at the lesson breakpoint.

Base layout

Cards begin in one column, which works at narrow widths.

Conditional enhancement

At 48rem or wider, the same cards form three columns.

Content-driven choice

The breakpoint marks where the cards have enough room, not a named device.

Read the rule

@media (width >= 48rem) applies its declarations only when the viewport is at least 48rem wide — the same idea as min-width: 48rem. Rules outside it remain the fallback.

Read the Responsive CSS gauge

Important CSS

Range syntax (or the equivalent min-width form) enhances a mobile-first base.

.cards { display: block; }

@media (width >= 48rem) {
  .cards {
    display: flex;
    gap: 1rem;
  }
}

/* Equivalent classic form:
@media (min-width: 48rem) { ... } */