CSS Responsive Design: A Complete Guide for Beginners

Mobile-First: The Right Mindset

Mobile-first design means you write your base CSS for small screens, then add complexity for larger screens using min-width media queries. This approach is better than desktop-first for several reasons: mobile users are the majority of web traffic, it forces you to prioritize content, and adding styles with min-width is generally cleaner than overriding desktop styles with max-width.

/* Mobile-first base styles — no media query */
.container {
  padding: 16px;
  font-size: 16px;
}

/* Tablet — min-width: 768px */
@media (min-width: 768px) {
  .container {
    padding: 24px 40px;
    font-size: 18px;
  }
}

/* Desktop — min-width: 1024px */
@media (min-width: 1024px) {
  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 60px;
  }
}

Relative Units: rem, em, %, vw, vh

Responsive design requires moving away from fixed pixel values to relative units that scale with screen size or user preferences.

/* Fluid typography with clamp() */
h1 {
  font-size: clamp(28px, 5vw, 64px);
  /* minimum 28px, preferred 5% of viewport, maximum 64px */
}

.container {
  width: min(90%, 1100px); /* 90% wide OR 1100px, whichever is smaller */
}

Responsive Images

/* Always do this for images */
img {
  max-width: 100%;  /* never overflow their container */
  height: auto;     /* maintain aspect ratio */
  display: block;   /* removes mysterious inline gap below images */
}

/* Art direction with picture element — different images for different screens */
<picture>
  <source media="(min-width: 768px)" srcset="hero-desktop.jpg">
  <source media="(min-width: 480px)" srcset="hero-tablet.jpg">
  <img src="hero-mobile.jpg" alt="Hero image">
</picture>

Common Responsive Layout Patterns

/* Responsive navigation — stack on mobile, horizontal on desktop */
nav ul {
  display: flex;
  flex-direction: column;  /* mobile: vertical */
  gap: 8px;
}
@media (min-width: 768px) {
  nav ul {
    flex-direction: row;  /* desktop: horizontal */
  }
}

/* Auto-responsive card grid — NO media queries needed */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

/* Sidebar layout: stacked on mobile, side-by-side on desktop */
.page-layout {
  display: grid;
  grid-template-columns: 1fr;  /* mobile: one column */
}
@media (min-width: 1024px) {
  .page-layout {
    grid-template-columns: 240px 1fr;  /* desktop: sidebar + main */
  }
}