CSS Fundamentals

Responsive Design

⏱ 7 min read📖 Intermediate

Responsive design means your page looks good on every screen size — from a phone to a widescreen monitor. The main tool is the CSS @media query, which applies styles only when certain conditions are met.

More than half of all web traffic comes from mobile devices. If your Netflix clone only looks good on a desktop, half your visitors get a broken experience. Let's fix that.

The @media Query

A media query wraps a block of CSS that only applies when a condition is true — usually a screen width condition.

/* This only applies when the screen is 768px wide or smaller */
@media (max-width: 768px) {
  .top-bar {
    padding: 12px 20px;
  }
}

Everything inside the curly brackets only runs on screens 768px wide or narrower — phones and small tablets.

Common Breakpoints

These are the screen widths most designers target:

/* Mobile — phones */
@media (max-width: 480px) { ... }

/* Tablet */
@media (max-width: 768px) { ... }

/* Small desktop / large tablet */
@media (max-width: 1024px) { ... }

You don't need to use all of them. Most projects only need mobile and desktop styles.

Making the Netflix Top Bar Responsive

On desktop, the top bar shows the Netflix logo and a Sign In button side by side. On mobile, we want to shrink the text size and padding so nothing gets cut off.

/* Desktop — default */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
}

.logo {
  font-size: 28px;
}

/* Mobile */
@media (max-width: 480px) {
  .top-bar {
    padding: 12px 20px;
  }

  .logo {
    font-size: 20px;
  }
}

💡

Click Try It Yourself to see the layout. Resize the editor preview to see the styles change at different widths.

Making the Movie Grid Responsive

The movie grid should show fewer columns on smaller screens. We can do this with media queries, or use the auto-fill + minmax trick from the Grid lesson that handles it automatically:

/* Automatically adjusts columns based on screen width */
.movie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Or with explicit media queries */
@media (max-width: 768px) {
  .movie-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .movie-grid {
    grid-template-columns: 1fr;
  }
}

The viewport meta tag

For media queries to work on real mobile devices, you need this tag in your HTML <head>:

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

Without it, mobile browsers zoom out to show the full desktop version instead of rendering at the actual mobile width. You already added this when you created index.html at the start — just don't remove it.

Next up: one last CSS technique — pseudo-elements. You'll use ::before and ::after to add gradient overlays and decorative effects without touching the HTML.

Learn about pseudo-elements →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.