Responsive Web Design with CSS

Learn responsive CSS basics: the viewport, flexible layouts, mobile-first media queries and practical breakpoints.

Set the viewport for mobile browsers

Include this metadata in the document head so the browser uses the device width as the page viewport. Without it, some mobile browsers may lay out the page on a wider virtual canvas and scale it down.

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

Start with a flexible layout

Responsive design lets a page adapt to the available space. Prefer flexible widths and wrapping before adding breakpoints for a specific device size.

.content {
  width: min(100% - 2rem, 70rem);
  margin-inline: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

Add a media query when the layout needs it

A media query applies styles only when its condition matches. A mobile-first stylesheet starts with the narrow layout, then adds changes as the viewport grows.

.site-nav {
  display: grid;
  gap: 0.5rem;
}

@media (min-width: 48rem) {
  .site-nav {
    display: flex;
    align-items: center;
  }
}

Choose breakpoints from the content

Resize the page and add a breakpoint where the content becomes crowded or difficult to use. Test text zoom and keyboard navigation as well as different screen widths.