Media Queries

The @media rule

A media query applies CSS only when a condition is true — usually a screen width. Inside it, you override your base styles.

<style>
  .box { background:#4338ca; color:#fff; padding:30px; text-align:center; font-size:20px; border-radius:10px; }
  @media (max-width: 500px) {
    .box { background:#06b6d4; font-size:14px; padding:14px; }
  }
</style>
<div class="box">Resize me — I change below 500px wide!</div>

The first .box rule is the base style (indigo, big text), applied at all sizes. The @media (max-width: 500px) { ... } block is a conditional: the rules inside it only switch on when the screen is 500px wide or narrower. At that point its .box rule overrides the base — cyan background, smaller text and padding. Resize the preview across 500px and watch it flip. That on/off-by-width behaviour is the whole engine of responsive design.

A responsive card grid

Now a real-world use: a row of cards that shows 3 across on a wide screen, 2 on a tablet and 1 on a phone. We set a base 3-column grid, then use two media queries to change the column count as the screen narrows. Read it, then follow the explanation below:

<style>
  .cards { display:grid; gap:10px; grid-template-columns: repeat(3, 1fr); }
  .cards > div { background:#4338ca; color:#fff; padding:20px; border-radius:8px; text-align:center; }
  @media (max-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .cards { grid-template-columns: 1fr; } }
</style>
<div class="cards"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

The base rule sets a 3-column grid. Then two media queries step the layout down as the screen shrinks: at max-width: 700px it becomes 2 columns, and at max-width: 420px it becomes a single column. The browser always applies the narrowest matching rule, so a 400px phone gets 1 column, a 600px tablet gets 2, and a wide screen gets 3. This 3 → 2 → 1 pattern is one of the most common responsive layouts on the web.