Responsive Web Design

📚 Lesson 11 of 30 • ⏱ 12 min read • Intermediate

What is Responsive Design?

A responsive website works well on every screen size — from a 320px mobile phone to a 4K desktop monitor. In India, over 80% of web traffic is mobile, so this is critical.

The Viewport Meta Tag (Required)

HTML

<!-- Put this in every <head> — without it, mobile browsers zoom out -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-First Approach

Write CSS for mobile first, then add styles for larger screens using min-width media queries. This is the modern standard:

CSS

/* Mobile first: default styles for small screens */
.grid {
  display: grid;
  grid-template-columns: 1fr;  /* 1 column on mobile */
  gap: 1rem;
}

/* Tablet and up */
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop and up */
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

Fluid Layouts — No Media Queries Needed

CSS

/* auto-fit + minmax: responsive grid with ZERO media queries */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
/* Creates as many columns as fit. On mobile: 1 col. On desktop: 3-4 cols. */

Responsive Typography

CSS

/* clamp(minimum, preferred, maximum) */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); }
p  { font-size: clamp(1rem, 2.5vw, 1.25rem); }
/* Scales smoothly between mobile and desktop — no breakpoints needed */

Responsive Images

CSS

/* Images never overflow their container */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

Common Breakpoints

Reference

< 480px   — Small mobile
480–768px — Mobile / large mobile
768–900px — Tablet
900–1200px — Small desktop
> 1200px  — Large desktop

Tip: Don't memorize breakpoints. Add them where YOUR content breaks.

← CSS Grid Next: Media Queries →