CSS Responsive Design

What is responsive web design?

Responsive web design makes a layout adapt to different viewport sizes and user settings instead of depending on one fixed screen width.

.page {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;
}

Viewport meta tag

Responsive pages normally include the viewport meta tag in HTML so mobile browsers use the device width as the layout viewport.

<meta name="viewport"
      content="width=device-width, initial-scale=1">

Mobile-first approach

Mobile-first means writing the simplest small-screen layout first, then adding enhancements for wider screens with min-width media queries.

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

@media (min-width: 48rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

Media queries

A media query applies CSS only when its condition matches.

@media (min-width: 64rem) {
  .dashboard {
    grid-template-columns: 280px 1fr;
  }
}

Common conditions include viewport width, orientation and user preferences. For most layout work, width-based conditions are the starting point.

Choose breakpoints from content

Do not treat breakpoints as device model names. Add a breakpoint when the current layout starts looking cramped, stretched or difficult to use.

min-width vs max-width queries

min-width is common in mobile-first CSS. max-width can still be useful when you intentionally need a rule only below a certain width.

/* Mobile-first enhancement */
@media (min-width: 50rem) {
  .hero {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* Target smaller widths when needed */
@media (max-width: 30rem) {
  .actions {
    flex-direction: column;
  }
}

Fluid widths and max-width

Responsive layouts usually combine flexible width with a readable maximum width.

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

The container can shrink on small screens but stops growing after the maximum width.

Relative units

Units such as rem, %, vw and flexible Grid/Flex values help layouts adapt. Use each unit according to what should scale.

.hero {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

Responsive Grid without many breakpoints

CSS Grid can often adapt automatically with auto-fit and minmax().

.course-grid {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1rem;
}

Responsive Flexbox

Wrapping Flexbox layouts can also adapt naturally.

.features {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.feature {
  flex: 1 1 260px;
}

Responsive images

Images should not overflow their containers. A common CSS baseline is:

img {
  max-width: 100%;
  height: auto;
}

For content images, HTML features such as srcset, sizes and <picture> can also help the browser select an appropriate source.

Responsive video and embeds

aspect-ratio can make embedded media resize cleanly.

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
}

Responsive navigation idea

Navigation often needs a different arrangement when space becomes limited. Keep the HTML structure and interaction accessible; use CSS to change layout and JavaScript only when an interactive menu actually needs open/close behavior.

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 48rem) {
  .nav-links {
    flex-direction: row;
    align-items: center;
  }
}

Prevent accidental horizontal overflow

Horizontal scrolling often comes from fixed widths, long unbreakable content, oversized media or positioned elements.

.card {
  min-width: 0;
}

.long-link {
  overflow-wrap: anywhere;
}

Responsive means more than screen width

A layout should remain usable when users zoom text/page content. At high zoom, a desktop viewport can effectively behave like a much narrower layout.

• Test at 200% browser zoom.
• Allow content to reflow.
• Avoid fixed heights for text-heavy components.
• Do not place critical content in tiny fixed boxes.

Respect user preferences

Responsive design also includes adapting to user settings where appropriate. One common example is reduced motion.

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
  }
}

We will cover motion more deeply in the transitions and animations chapter.

Test responsive layouts

Do not test only at one phone width and one desktop width. Drag the viewport continuously and look for awkward intermediate states.

• Small phone-sized viewport.
• Medium/tablet-like widths.
• Laptop and wide desktop.
• Portrait and landscape when relevant.
• 200% zoom.
• Long headings, long links and real content.
• Keyboard focus and interactive controls.

Responsive design best practices

• Mobile-first base se start karo.
• Breakpoints content ke need par add karo.
• Fixed widths ki jagah fluid sizing + max-width use karo.
• Flexbox/Grid ko layout ke liye use karo instead of random offsets.
• Images and embeds ko container ke andar responsive rakho.
• Touch targets aur spacing ko small screens par cramped mat karo.
• Zoom and long content ke saath layout test karo.
• Important content ko viewport size ke basis par unnecessarily hide mat karo.

Common beginner mistakes

• Responsive design ko sirf media queries samajhna.
• Every device model ke liye separate breakpoint banana.
• Desktop fixed-width layout ko phone par squeeze karna.
• Images par fixed width/height se overflow create karna.
• Text size ko only vw me set karna without limits.
• Horizontal overflow ko overflow-x: hidden se blindly hide karna.
• 200% zoom test na karna.
• Visual layout changes se DOM order aur accessibility ignore karna.