Responsive Design Guide — Media Queries, Mobile-First, and Fluid Layouts

Responsive web design makes your website look and work well on every device — from the smallest phone to the largest desktop monitor — by adapting layout, content, and imagery to screen size.

What You’ll Learn

• Mobile-first design philosophy and its benefits
• Media queries and breakpoint strategies
• Fluid layouts with percentages, flexbox, and grid
• Responsive images with srcset and picture elements
• Testing and debugging responsive designs

Why It Matters

Over 60% of web traffic comes from mobile devices. Google uses mobile-first indexing — it ranks your site based on its mobile version. A non-responsive site frustrates mobile users, hurts SEO, and loses business. Responsive design is not optional in 2026 — it’s required.

Real-world use: The Doda Browser displays thousands of different websites daily. Sites that aren’t responsive get panned in reviews. Durga Antivirus Pro’s customer portal must work perfectly on a technician’s phone in the field and on a security analyst’s 4K monitor at headquarters.

    flowchart LR
  A[Mobile<br/>320px+] --> B[Tablet<br/>768px+]
  B --> C[Desktop<br/>1024px+]
  C --> D[Large Desktop<br/>1440px+]
  style A fill:#4af,color:#fff
  style D fill:#f90,color:#fff
  

Mobile-First Design

Mobile-first means designing for the smallest screen first, then adding complexity for larger screens with min-width media queries.

Why Mobile-First?

1. Performance — You start with the essential content and add enhancements. Mobile users get the leanest experience.
2. Focus — Forces you to prioritize what’s truly important (because you have limited space).
3. Future-proof — New devices with unusual screen sizes still get a usable baseline.

/* Mobile-first: base styles for all devices */
.page {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.sidebar {
  display: none; /* Hidden on mobile */
}

.content {
  flex: 1;
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .page {
    flex-direction: row;
    padding: 24px;
  }
  
  .sidebar {
    display: block; /* Show sidebar on tablet+ */
    width: 250px;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
  }
}

Media Queries

Media queries apply CSS rules based on device characteristics — width, height, orientation, resolution, and more.

Common Media Query Patterns

/* Width-based (most common) */
@media (min-width: 768px) { /* Tablet and up */ }
@media (max-width: 767px) { /* Mobile only */ }
@media (min-width: 768px) and (max-width: 1023px) { /* Tablet only */ }

/* Orientation */
@media (orientation: landscape) { /* Wider than tall */ }
@media (orientation: portrait) { /* Taller than wide */ }

/* Resolution */
@media (min-resolution: 2dppx) { /* Retina/HiDPI displays */ }

/* Dark mode preference */
@media (prefers-color-scheme: dark) { /* User prefers dark mode */ }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Breakpoint Strategy

Don’t use device-specific breakpoints (iPhone, iPad). Use content-based breakpoints — add a breakpoint when the design starts to look bad.

/* Recommended breakpoints */
/* Mobile: 0-639px (no query needed — it's the default) */

/* Tablet: 640px+ */
@media (min-width: 640px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large desktop: 1440px+ */
@media (min-width: 1440px) { }

Fluid Layouts

Fluid (liquid) layouts use relative units instead of fixed pixel values, so content scales naturally.

Relative Units

/* Fixed (bad) */
.container {
  width: 960px;
  font-size: 16px;
}

/* Fluid (good) */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 48px);
  font-size: clamp(14px, 1.5vw, 18px);
}

/* Fluid typography with clamp */
h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.2;
}

p {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.6;
}

/* Fluid spacing */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(16px, 3vw, 32px);
  padding: clamp(16px, 4vw, 48px);
}

Flexbox for Responsive Layouts

/* Auto-wrapping flex items */
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav a {
  flex: 1 1 auto;
  min-width: 120px; /* Prevents items from getting too narrow */
  text-align: center;
}

/* Holy grail layout with flexbox */
.app-layout {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex: 1 1 250px; /* Grow, shrink, basis */
}

.main {
  flex: 3 1 500px;
}

Responsive Images

Serving the same large image to mobile users wastes bandwidth and slows page loads. Use srcset and <picture> to serve appropriately-sized images.

srcset and sizes

<!-- Simple srcset — browser picks the best size -->
<img src="photo-800.webp"
     srcset="photo-400.webp 400w,
             photo-800.webp 800w,
             photo-1200.webp 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            800px"
     alt="Responsive example photo"
     loading="lazy"
     width="800" height="600">

<!-- Art direction with picture element -->
<picture>
  <source srcset="hero-wide.webp" media="(min-width: 1200px)"
          width="1200" height="600">
  <source srcset="hero-square.webp" media="(min-width: 768px)"
          width="768" height="768">
  <img src="hero-mobile.webp" alt="Hero banner"
       width="400" height="600" loading="lazy">
</picture>

Inline SVG for Icons

SVG icons scale infinitely and stay sharp at any size:

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>

Testing Responsive Designs

Browser DevTools

Chrome DevTools and Firefox DevTools include responsive design mode that simulates different devices:

1. Open DevTools (F12 or Ctrl+Shift+I)
2. Click the device toolbar icon (mobile/tablet)
3. Select a device from the dropdown or drag the handles
4. Test different orientations and zoom levels

What to Check

• Content doesn’t overflow — No horizontal scrollbars
• Touch targets are 44x44px minimum — Buttons and links are big enough
• Text is readable — No tiny fonts requiring zoom
• Forms work — Input fields aren’t cut off or overlapping
• Images scale correctly — No pixelated or stretched images

Common Errors

1. Not using a viewport meta tag — Without <meta name="viewport" content="width=device-width, initial-scale=1">, mobile browsers render pages at a desktop width and zoom out.
2. Fixed-width elements — width: 960px causes horizontal scrolling on smaller screens. Use max-width with % or clamp().
3. Hiding overflow with overflow-x: hidden — This clips content and can break sticky/fixed positioning. Fix the layout instead of hiding the problem.
4. Missing <source> fallback — Always include a child <img> inside <picture> for browsers that don’t support the format.
5. Forgetting prefers-reduced-motion — Respect users who need reduced motion for accessibility reasons.

Practice Questions

1. What is mobile-first design and why is it recommended? Mobile-first means writing base CSS for mobile devices and adding complexity for larger screens with min-width media queries. It’s recommended because it prioritizes performance, forces content focus, and is future-proof.

2. What does clamp(1rem, 3vw, 2rem) do? It sets a value that scales between 1rem and 2rem based on viewport width. At 500px viewport, 3vw = 15px = ~0.94rem — clamped to 1rem minimum.

3. How do srcset and sizes improve image performance? srcset provides multiple image resolutions. sizes tells the browser how much space the image will occupy. The browser downloads the most appropriate image for the device’s screen size and resolution.

4. What is a content-based breakpoint? Instead of targeting specific devices (iPhone, iPad), add a breakpoint where the design naturally breaks — text wraps awkwardly, overlapping occurs, or margins become excessive.

5. Why should you avoid max-width media queries in a mobile-first approach? max-width queries target smaller screens (desktop-down approach). Mobile-first uses min-width exclusively, building up from the smallest screen.

Challenge

Build a fully responsive dashboard layout that has a sidebar navigation, main content area, and header. On mobile, the sidebar should become a bottom tab bar. On tablet, the sidebar should collapse to icons only. On desktop, show the full sidebar with text labels.

Real-World Task

Create a responsive status monitoring page for Durga Antivirus Pro that displays system health metrics. On mobile, stack cards vertically with large touch targets. On tablet, show a 2-column grid. On desktop, show a 4-column grid with additional data. Include responsive charts that scale with the viewport.

Previous: CSS Fundamentals | Previous: HTML Fundamentals | Related: CSS Flexbox Guide

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.