CSS Responsive Design

Overview

Responsive design ensures usable layouts on phones, tablets, and desktops. Combine fluid widths, flexible grids, relative units, and media queries. Mobile-first CSS starts with base styles, then adds min-width breakpoints.

Syntax / Usage

/* Mobile-first */
.sidebar {
  display: none;
}

@media (min-width: 768px) {
  .sidebar {
    display: block;
    width: 240px;
  }
}

/* Fluid typography */
html {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

/* Relative units */
.hero {
  padding: 2rem 5vw;
  max-width: 72rem;
}

/* Container queries (modern) */
.card-container {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { display: flex; }
}

Examples

Responsive grid:

.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

Hide decorative content on small screens:

@media (max-width: 767px) {
  .hero-illustration { display: none; }
}

Common Mistakes

• Fixed pixel widths everywhere blocking small screens
• Too many breakpoints—let content dictate breaks, not devices
• Horizontal overflow from images without max-width: 100%
• Desktop-first max-width queries harder to maintain than mobile-first

See Also

flexbox grid custom-properties box-model