Intermediate10 min study

Responsive design and container queries

Design components that adapt to available space, content pressure, input method, and user preferences.

Question progress0 / 10 completed

Start the lesson

Responsive design and container queries visual explanation

WHAT YOU WILL BE ABLE TO DO

Learning outcomes

Explain responsive design and container queries in plain language.
Connect the behavior to the underlying browser or framework model.
Implement the core pattern and reason through edge cases.
Answer common follow-ups without relying on memorized phrases.

01Explain it simply

Responsive design is not a list of device widths. It is a layout's ability to respond to the actual space and capabilities available to it.

One-line definition: Design components that adapt to available space, content pressure, input method, and user preferences.

02Mental model

Use fluid layout by default, media queries for viewport or device capabilities, and container queries when a reusable component should adapt to the width of its parent rather than the page.

03Step by step

Start with a single-column, content-safe baseline.
Use flexible tracks and minmax before adding breakpoints.
Add a breakpoint where content becomes uncomfortable.
Use container queries for reusable modules.
Test text zoom, long labels, touch targets, and reduced motion.

04Working example

CSS

1.card-list { container-type: inline-size; }2.card { display: grid; gap: 1rem; }3
4@container (min-width: 36rem) {5  .card { grid-template-columns: 12rem 1fr; }6}7
8.card__title { font-size: clamp(1.25rem, 3cqi, 2rem); }

The card adapts to the space allocated by its container, so the same component can work in a sidebar, grid, or full-width layout without page-specific classes.

05Where it is used

Reusable cards and panels
Dashboard widgets
Embeddable components
Responsive typography and spacing

06Common mistakes

Fixed pixel widths that overflow at zoom
Device-specific breakpoints copied without content testing
Hiding important content on small screens
Assuming hover is available on touch devices

07Interview answer

Explain intrinsic layout first, then distinguish viewport queries from container queries and capability queries such as prefers-reduced-motion.

When is a container query better than a media query?

When a component's layout should depend on the space its parent gives it, regardless of the overall viewport width.

DDConcept deep dives

Deep dive 1

Content determines breakpoints

Begin with a narrow, single-column baseline and allow text and controls to take the space they require. Add a breakpoint when the composition becomes uncomfortable, not because a device list names a particular width. Fluid tracks, wrapping, minmax, clamp, and intrinsic sizes often remove the need for several brittle breakpoints.

Test long labels, localized text, text zoom, and missing media.
Keep touch targets usable without assuming every narrow screen is touch-only.
Avoid hiding essential content merely to make a layout fit.

Deep dive 2

Container queries make components placement-aware

A media query sees the viewport, so the same card receives the same rule whether placed in a sidebar or a wide grid. A size container query sees an ancestor's available space and lets the card choose its own composition. Establish containment on the parent whose allocated size should control the component.

Use container-type: inline-size for common width-driven components.
Name containers when nested layouts could select the wrong ancestor.
Container query units such as cqi can scale within the relevant component context.

CSS

1.card-region { container: cards / inline-size; }2.card { display: grid; gap: 1rem; }3
4@container cards (min-width: 36rem) {5  .card { grid-template-columns: 10rem 1fr; }6}

The card changes only when its own region can support two columns, regardless of overall window width.

Deep dive 3

Capability and preference queries protect interaction

Viewport size does not reliably reveal whether a user has touch, a precise pointer, hover, reduced-motion preference, dark color preference, or high contrast. Use relevant media features to enhance, while retaining a baseline that works with keyboard and touch. Reduced motion should remove unnecessary movement without removing information or completion feedback.

Design hover as enhancement, never the sole way to reveal an essential action.
Use prefers-reduced-motion to shorten or replace spatial animation.
Logical properties make spacing and alignment adapt to writing direction.

QAInterview questions and model answers

Attempt each answer aloud before opening it. The model answer shows the depth and precision expected in an interview; it is not a script to memorize.

Intermediate · Coding · 1 min · Question 1What makes a design responsive beyond media queries?Open model answer

Model answer

Responsive design uses fluid sizing, flexible layout, content-safe constraints, and capability or preference queries. Breakpoints should respond where content stops working, not to a fixed list of device models.

CSS

1.grid {2  display: grid;3  gap: 16px;4  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));5}6/* columns adapt to available width — no breakpoint list needed */

Open question page →

Intermediate · Coding · 1 min · Question 2When is a container query better than a media query?Open model answer

Model answer

Use a container query when a reusable component should adapt to the space its containing layout gives it. Use media queries for viewport-wide composition or device and user capabilities such as hover and reduced motion.

CSS

1.card-list { container-type: inline-size; }2
3@container (min-width: 400px) {4  .card { grid-template-columns: 120px 1fr; } /* reacts to the list, not the screen */5}

Open question page →

Intermediate · Coding · 1 min · Question 3How do you establish a query container?Open model answer

Model answer

Set container-type, commonly inline-size, on the intended ancestor and optionally give it a container-name. Descendant @container rules then query that container's size or styles according to the query type.

CSS

1.sidebar { container: sidebar / inline-size; }2
3@container sidebar (min-width: 300px) { .widget { display: flex; } }

Open question page →

Advanced · Coding · 1 min · Question 4Why use clamp for fluid sizing carefully?Open model answer

Model answer

clamp combines a minimum, preferred fluid expression, and maximum. It reduces abrupt jumps, but viewport-only text scaling can weaken zoom behavior if constructed poorly. Keep accessible bounds and test text zoom and narrow screens.

CSS

1h1 { font-size: clamp(1.75rem, 1rem + 3vw, 3rem); }2/* never smaller than 1.75rem, never larger than 3rem */

Open question page →

Intermediate · Coding · 1 min · Question 5What are logical properties useful for?Open model answer

Model answer

Properties such as margin-inline and padding-block express layout relative to writing mode rather than left/right assumptions. They make components more adaptable to right-to-left and vertical writing systems.

CSS

1.card {2  padding-inline: 16px;  /* left/right in LTR, right/left in RTL */3  margin-block: 8px;     /* top/bottom */4  border-inline-start: 2px solid; /* the "leading" edge */5}

Open question page →

Intermediate · Coding · 1 min · Question 6How should responsive interfaces account for input capability?Open model answer

Model answer

Do not infer touch from width. Use capability queries such as hover and pointer where enhancement depends on them, retain keyboard access, and never hide essential actions behind hover-only interactions.

CSS

1@media (hover: hover) and (pointer: fine) {2  .row:hover .actions { opacity: 1; } /* progressive enhancement only */3}4/* touch users still reach .actions another way */

Open question page →

Beginner · Conceptual · 1 min · Question 7What is mobile-first CSS?Open model answer

Model answer

It defines a content-safe baseline without requiring a query, then adds capabilities or composition as space increases. It is a cascade strategy, not a claim that mobile matters more.

Open question page →

Advanced · Conceptual · 1 min · Question 8How do auto-fit and auto-fill affect responsive grids?Open model answer

Model answer

Both repeat tracks that fit; auto-fit collapses empty tracks so occupied tracks can expand, while auto-fill preserves the potential empty track structure.

Open question page →

Advanced · Conceptual · 1 min · Question 9What does prefers-reduced-motion require?Open model answer

Model answer

Reduce or replace nonessential motion while preserving state change and task completion. Do not simply remove feedback that users still need to understand the interface.

Open question page →

Advanced · Conceptual · 1 min · Question 10Why test at 200% zoom?Open model answer

Model answer

Zoom increases effective content pressure and reveals clipping, overlap, fixed-height assumptions, and reflow failures that a narrow device simulation alone may miss.

Open question page →

SCScenario questions

Scenario 1

The same product card appears in a narrow sidebar and a wide main grid at the same viewport width.

Make the card's baseline work at narrow sizes.
Establish each card-list region as a size container.
Switch the card composition based on container width.
Test long translations, zoom, and missing images.

Reveal worked answer

A viewport media query cannot distinguish the two placements. I would query the card's container and move from stacked to media-plus-content layout only when that container has enough inline space. Global page navigation can still use viewport queries.

Verify and go deeper

MDN: CSS container queries ↗