Chapter 2.6☕ 16 min read

Responsive Web Design

Create websites that work on any device — mobile, tablet, desktop. Responsive design is not optional anymore.

01What is Responsive Design?

Responsive design is an approach that makes web pages render well on all devices — phones, tablets, laptops, and desktops. It uses fluid grids, flexible images, and CSS media queries.

🚦

Analogy: Think of responsive design like the traffic system in Hyderabad — it adapts to different vehicle types (cars, bikes, autos) just like your website adapts to different screen sizes!

Why responsive matters: Over 60% of web traffic comes from mobile devices. Google ranks mobile-friendly sites higher. Users expect a perfect experience on any screen.

02Viewport and Media Queries

The viewport meta tag is essential for responsive design to work on mobile devices.

<!-- Required for all responsive websites -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS media queries allow you to apply different styles based on device characteristics:

/* Mobile-first approach: base styles target mobile */
.grid {
  display: grid;
  grid-template-columns: 1fr;       /* Single column on mobile */
  gap: 1rem;
}

/* Tablet: 768px and above */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .header { font-size: 1.5rem; }
}

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

/* Large screens: 1200px and above */
@media (min-width: 1200px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

/* Common breakpoints for reference */
/* Mobile: 320px — 480px */
/* Tablet: 481px — 768px */
/* Laptop: 769px — 1024px */
/* Desktop: 1025px — 1440px */

💡

Pro Tip: Use mobile-first approach: write base styles for mobile, then add min-width breakpoints to enhance for larger screens. This is simpler and better for performance than max-width (desktop-first).

03Fluid Layouts and Flexible Units

Use relative units instead of fixed pixels for flexible layouts:

UnitRelative ToBest For

%Parent elementWidth, height, padding

emParent font-sizePadding, margins relative to text

remRoot font-size (16px default)Font sizes, spacing (most used!)

vw1% of viewport widthFull-width sections, hero areas

vh1% of viewport heightFull-height sections, overlays

chWidth of "0" characterMax-width for readable text (65ch)

.container {
  width: 90%;               /* 90% of parent */
  max-width: 1200px;        /* But never wider than 1200px */
  margin: 0 auto;
  padding: 2rem;            /* rem scales with user font size */
}

.hero {
  min-height: 100vh;        /* Full viewport height */
  width: 100vw;             /* Full viewport width */
  display: flex;
  align-items: center;
  padding: 2rem;
}

/* Fluid layout with Flexbox + relative units */
@media (max-width: 768px) {
  .columns { flex-direction: column; }  /* Stack on mobile */
  .column   { width: 100%; }
}

/* Tip: Use clamp() for fluid sizes */
h1 { font-size: clamp(1.75rem, 4vw, 3rem); }  /* Min 1.75rem, scales, max 3rem */

04Responsive Images and Media

Ensure images and media scale properly across devices:

/* Basic responsive image */
img { max-width: 100%; height: auto; display: block; }

/* Using srcset for different image sizes */
<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="A responsive image">

/* Responsive video embed */
.video-container {
  position: relative;
  padding-bottom: 56.25%;  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Responsive background images */
.hero { background-image: url('hero-mobile.jpg'); }
@media (min-width: 768px) {
  .hero { background-image: url('hero-tablet.jpg'); }
}
@media (min-width: 1024px) {
  .hero { background-image: url('hero-desktop.jpg'); }
}

05Exercise — Responsive Layouts

Practice responsive design below:

Create responsive.html with the viewport meta tag.

Build a responsive page and resize the browser to test:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Practice</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui; }

    .container { width: 90%; max-width: 1200px; margin: 0 auto; padding: 2rem 0; }

    .header { background: #f97316; color: white; padding: 1.5rem; text-align: center; border-radius: 8px; margin-bottom: 1rem; }

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

    .card { background: #f3f4f6; padding: 1.5rem; border-radius: 8px; }

    @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); } }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">🍛 Responsive Page</div>
    <div class="grid">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
    </div>
  </div>
</body>
</html>

Try these experiments:

Add a fourth card — see how it wraps to 2 columns on tablet Add clamp() for the heading font-size: font-size: clamp(1.5rem, 5vw, 3rem) Change the mobile grid to a single column layout with cards stacking vertically Add a sidebar that appears only on desktop with display: none / display: block Use Chrome DevTools device mode to test on different devices (Ctrl+Shift+M)

Done — Key Points:

✅ Always include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your HTML.
✅ Use mobile-first approach — base styles for mobile, min-width breakpoints for larger screens.
✅ Use relative units: % for widths, rem for spacing/fonts, vw/vh for full-screen sections.
✅ Common breakpoints: 768px (tablet), 1024px (desktop), 1200px (large). Base breakpoints on content, not devices.
✅ Make images responsive: max-width: 100%; height: auto;. Use srcset for art direction.
✅ clamp(min, preferred, max) creates fluid typography that scales between bounds.

Previous2.5 — Advanced CSS Grid 📋 All Chapters Next Chapter3.1 — Shadows & Border Effects →