LESSON 23

Media Queries

Learning objective: Apply different styles at different screen widths.

Understand

Media queries change styles based on the screen.

A media query wraps rules that only apply within a size range, like @media (max-width: 600px). Use them to stack columns, shrink fonts, or hide elements on small screens — the core tool of responsive design.

Analogy: A media query is like a rule that says 'when the room is small, rearrange the furniture.'

See It in Action

Stacking columns on mobile:

.grid { display: flex; }
@media (max-width: 600px) {
  .grid { flex-direction: column; }
}
How it works: On screens 600px or narrower, the grid switches from a row to a stacked column.

Try It Yourself

  1. Add a media query for max-width 600px.
  2. Stack a flex row into a column inside it.
  3. Shrink a heading's font-size on mobile.

Quick Quiz

When do rules inside @media (max-width: 600px) apply?

Challenge

Make a two-column layout stack into one column on phones.

Success condition: Your layout switches to a single column on narrow screens.