Tutorial: responsive design with media queries

If your page looks perfect on your laptop but is a mess on your phone, you have half a page. Most of your visitors will arrive from a phone, so this isn't optional.

Step 1: add the viewport (the step everyone forgets)

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

Without this line, phones "pretend" to be a desktop screen and everything looks tiny. With it, the browser respects the device's real width. Copy it, paste it, never forget it.

Step 2: design mobile-first

.container {
  padding: 1rem;
  font-size: 1rem;
}

Starting with the mobile design forces you to prioritize what's essential. It's easier to add space on big screens than to remove it on small ones.

Step 3: add styles for bigger screens

@media (min-width: 768px) {
  .container {
    padding: 3rem;
    font-size: 1.25rem;
    max-width: 800px;
    margin: 0 auto;
  }
}

min-width: 768px means "apply this only if the screen is 768px wide or more" (tablets and computers). You can chain several media queries for different sizes.

Step 4: test it in the browser

Open dev tools (F12), turn on device mode, and resize the window. If your layout adapts without breaking, congrats: it's responsive. If something overflows the screen, it's not a mystical bug, it's probably a fixed width (width: 500px) you forgot to make flexible.

What did you just learn?

• Why the viewport meta tag is mandatory.
• How to design mobile-first and add styles progressively.
• How to use @media (min-width: ...) to adapt your layout.