Media Queries

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Change CSS rules based on screen width

Media Queries let you apply CSS rules based on conditions like screen width, orientation, or device capability. For example, you can use a media query when you want to show 3 cards side by side on desktop but stack them vertically on mobile.

css

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Tablet and small screens */
@media screen and (max-width: 900px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Phones */
@media screen and (max-width: 600px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

You should see

Cards will switch to 3 columns on desktop, 2 columns on tablet, and 1 column on phone.

Warning

Don't base your breakpoints on one specific phone model. It's more accurate to set breakpoints wherever the content actually starts breaking.