Responsive Web Design with CSS

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

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.