How to Make a Better Responsive web Design Full Guide

TL;DR

Container Queries revolutionize responsive design—components adapt to their container size, not viewport. Pair with CSS Subgrid for complex layouts, responsive images with picture and AVIF, and test across foldables and large screens. Use Chrome DevTools and responsive testing frameworks to ensure consistency everywhere.

Responsive design used to mean three breakpoints: mobile, tablet, desktop. That's ancient history now.

In 2026, you're designing for 100+ device sizes. Smartphones with 6-7 inch screens. Foldable devices that unfold to tablet size. Desktops with 5K displays. Watches. AR glasses. Apps need to work flawlessly across a spectrum of contexts, and the same component might be 300px wide in a sidebar or 1000px wide on the main stage.

Container Queries changed everything. Instead of asking "how wide is the viewport?" you ask "how wide is my container?" This guide covers the modern responsive design toolkit: Container Queries, CSS Subgrid, responsive images, and how to test across the real diversity of devices users have.

Container Queries: The Game-Changer

Container Queries let components adapt based on their size, not the viewport. This is the most significant responsive design advancement since media queries.

Basic Syntax

/* Define a container context */
.card-container {
  container-type: inline-size; /* Watch the width of this element */
  container-name: card; /* Optional: name it for specificity */
}

/* Query the container size */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 300px) {
  .card {
    display: block;
  }
}

The card component automatically reflows based on its container width, regardless of viewport size.

Why This Matters

Old approach with media queries:

/* You have to know the card sits in a sidebar on mobile, main on desktop */
@media (min-width: 768px) {
  .card { grid-template-columns: 1fr 1fr; }
}

New approach with Container Queries:

/* The card doesn't care where it is—it adapts to its space */
@container (min-width: 400px) {
  .card { grid-template-columns: 1fr 1fr; }
}

This means the same Card component works in:

• A 300px sidebar (single column)
• A 600px modal (two columns)
• A 1200px main area (two columns)
• A foldable left pane (single column)

Without writing multiple versions or media queries.

Practical Example: Blog Card

// Component stays the same—CSS adapts it
export function BlogCard({ post }) {
  return (
    <article className="card">
      <img src={post.image} alt={post.title} className="card-image" />
      <h3>{post.title}</h3>
      <p>{post.excerpt}</p>
      <a href={post.url}>Read more</a>
    </article>
  );
}

.card-container {
  container-type: inline-size;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Narrow: stacked layout */
@container (max-width: 350px) {
  .card-image {
    height: 150px;
  }
}

/* Wide: side-by-side */
@container (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 250px 1fr;
  }

  .card-image {
    height: auto;
  }
}

/* Very wide: larger image */
@container (min-width: 700px) {
  .card {
    grid-template-columns: 350px 1fr;
  }
}

The same component now works perfectly in any context.

CSS Subgrid for Complex Responsive Layouts

Subgrid lets child grids inherit parent grid tracks. This solves alignment nightmares.

Problem: Without Subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* These rows don't align across cards! */
}

Each card has different row heights because their content varies. Without Subgrid, aligning buttons at the bottom is impossible.

Solution: With Subgrid

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto; /* Define rows for all children */
  gap: 1rem;
}

.card {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid; /* Inherit parent's rows */
}

Now all cards' buttons align at the bottom, automatically.

Practical Example: Product Grid

export function ProductGrid({ products }) {
  return (
    <div className="product-grid">
      {products.map(product => (
        <article key={product.id} className="product-card">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p className="description">{product.description}</p>
          <p className="price">{product.price}</p>
          <button>Add to Cart</button>
        </article>
      ))}
    </div>
  );
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto 1fr auto auto auto; /* Image, title, description, price, button */
  gap: 1rem;
}

.product-card {
  display: grid;
  grid-template-columns: subgrid; /* Inherit parent columns */
  grid-template-rows: subgrid; /* Inherit parent rows */
}

img {
  grid-column: 1;
  grid-row: 1;
}

h3 {
  grid-column: 1;
  grid-row: 2;
}

.description {
  grid-column: 1;
  grid-row: 3;
}

.price {
  grid-column: 1;
  grid-row: 4;
}

button {
  grid-column: 1;
  grid-row: 5;
}

All buttons align perfectly, regardless of content length.

Responsive Images

Images need to adapt to viewport, device, and pixel density.

The <picture> Element

Serve different images based on viewport size:

<picture>
  <!-- Desktop: full-width image -->
  <source media="(min-width: 1200px)" srcset="hero-2000w.avif" />

  <!-- Tablet: medium image -->
  <source media="(min-width: 768px)" srcset="hero-1000w.avif" />

  <!-- Mobile: small image -->
  <source media="(max-width: 767px)" srcset="hero-500w.avif" />

  <!-- Fallback for older browsers -->
  <img src="hero-500w.jpg" alt="Hero section" />
</picture>

The srcset Attribute

Let the browser choose the best resolution:

<img
  src="image-400w.avif"
  srcset="
    image-400w.avif 400w,
    image-800w.avif 800w,
    image-1200w.avif 1200w,
    image-2000w.avif 2000w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1200px) 90vw,
    1000px
  "
  alt="Product image"
/>

This tells the browser:

• On screens up to 600px, load an image that's 100% of viewport width
• On screens 600-1200px, load 90% of viewport width
• Larger screens, load a fixed 1000px image
• Always use the smallest image that covers that width

The browser picks from the srcset (400w, 800w, etc.) based on its calculation.

AVIF Format

AVIF is the newest format. It's significantly smaller than WebP or JPEG:

<picture>
  <!-- Use AVIF for modern browsers -->
  <source srcset="image.avif" type="image/avif" />

  <!-- Fallback to WebP -->
  <source srcset="image.webp" type="image/webp" />

  <!-- Fallback to JPEG -->
  <img src="image.jpg" alt="Description" />
</picture>

Typical savings:

• JPEG: 100KB
• WebP: 65KB
• AVIF: 40KB

That's 60% reduction in file size for identical visual quality.

Responsive Design for New Form Factors

Foldable Devices

Foldables have two screens separated by a hinge. The viewport literally has a gap.

/* Detect the fold line */
@media (fold-left: 0px) and (fold-right: 400px) {
  /* On left side of fold (0-400px) */
  .sidebar {
    width: 100%;
  }

  /* On right side (400px+) */
  body {
    margin-left: 400px;
  }
}

Test on Samsung Galaxy Z Fold or Google Pixel Fold using Android emulators.

Large Screens (>1920px)

Don't stretch content infinitely. Use a max-width and center:

body {
  max-width: 1400px;
  margin: 0 auto;
}

/* For ultra-wide screens, add whitespace */
@media (min-width: 2560px) {
  body {
    max-width: 1600px;
  }
}

Watches and Small Screens

Single-column layout, larger touch targets (44px minimum):

@container (max-width: 280px) {
  button {
    padding: 0.75rem 1rem; /* 44px+ height */
  }

  .card {
    display: block; /* No grid */
  }
}

Testing Responsive Design

Chrome DevTools Device Mode

F12 → Toggle device toolbar (Ctrl+Shift+M). Test:

• All breakpoints
• Touch interactions
• Device pixel ratios

Responsive Testing Frameworks

BrowserStack, Sauce Labs, LambdaTest let you test on real devices.

CSS Validation

# Check for responsive issues
npx stylelint "**/*.css"

A/B Testing Responsive Layouts

Use feature flags to test variations:

export function CardLayout({ post }) {
  const isNewLayout = useFeatureFlag('new-card-layout');

  return isNewLayout ? (
    <CardNewLayout post={post} />
  ) : (
    <CardOldLayout post={post} />
  );
}

Measure bounce rate, engagement, conversion for each variant. Data drives decisions, not guesses.

Key Takeaways

Responsive design in 2026:

1. Container Queries first: Design components that adapt to their context, not the viewport
2. Subgrid for alignment: Complex layouts with consistent baselines
3. Responsive images: AVIF + srcset for smaller files and better performance
4. Embrace new form factors: Foldables and large screens are real use cases
5. Test extensively: Use real devices, not just your laptop
6. Measure impact: A/B test layout changes and iterate on data

The web is no longer three sizes. Build components that adapt gracefully to the infinite variety of devices in users' hands.