Responsive Design and Container Queries Tutorial | SovranCode

Course contentsResponsive Design and Container Queries · 16 topics

CSS Foundations

CSS Introduction Selectors and Relationships Cascade, Specificity, and Inheritance Values, Units, and Color

Layout Systems

The Box Model and Sizing Normal Flow, Display, and Positioning Flexbox CSS Grid

Applied CSS Systems

Backgrounds, Borders, and Visual Layers Interactive States and Pseudo-elements Overflow, Stacking Contexts, and Layering Transforms, Transitions, and Animation CSS Architecture, Components, and Maintenance

Responsive and Responsible CSS

Responsive Design and Container Queries Typography and Rhythm Motion, Focus, and Accessibility

CSS 67 min

Responsive Design and Container Queries

Design components for available space, content pressure, zoom, and user preferences.

Responsive design is not a list of device widths. Start with a flexible base, add a breakpoint when the content needs one, and use container queries when a component should respond to its own available space rather than the whole viewport.

See the core pattern

Read this rule set from the outside in. Identify the inputs, the decision or transformation, and the result before changing it.

.catalog { container: cards / inline-size; }
.card { display: grid; gap: 1rem; }

@container cards (min-width: 42rem) {
  .card {
    grid-template-columns: 12rem 1fr;
  }
}

Working rules

Test content at 200% zoom
Add breakpoints where layout pressure appears
Prefer container queries for reusable embedded components

A common mistake

Hiding useful content on small screens is not a responsive strategy; prioritize and reflow it instead.

Guided practice

Name the at-rule used to respond to an ancestor container's size.

Copy the example into the editable notebook below.
Change one thing at a time and keep the program or rule valid.
Explain the result in one sentence without relying on jargon.

CSS DEEP DIVE · ABOUT 35 MIN

Make a component respond to its own space

Read the explanation, predict the visual result, then edit and run a complete example. Finish with a repair, an independent build, and a knowledge check.

Start with the least space, then enhance

A flexible base should work before any breakpoint applies: readable text, naturally sized blocks, wrapping content, and media constrained to the container. Add a breakpoint where that particular content needs a different arrangement, not because a device category has a familiar number. A media query observes the viewport or another media feature. The same viewport can contain a narrow sidebar and a wide main region, which is why viewport rules alone may not describe the space available to a reusable card.

Query an ancestor, style its descendants

A size container query needs an eligible ancestor with container-type, commonly inline-size, or the container shorthand. A named container helps ensure a rule observes the intended ancestor rather than another nested container. The queried container does not use its own size query to style itself; the card inside it changes instead. Keep the base usable when the enhancement is not applied. Test the same component in two differently sized parents, then test browser zoom and long content to expose constraints that a single device screenshot would miss.

Set the catalog max-width to 25rem while leaving the browser wide. Explain why the card returns to one column.

Saved CSS practice

Edit the CSS inside the style element. Account work syncs; guest work stays on this device.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 1rem; }
.catalog { container: lessons / inline-size; max-width: 55rem; margin-inline: auto; }
.card { display: grid; gap: 1rem; border: 2px solid #254fc0; padding: 1rem; }
.visual { display: grid; place-items: center; min-height: 8rem; background: #edf2f7; font-size: 2rem; }
@container lessons (min-width: 35rem) { .card { grid-template-columns: 10rem minmax(0, 1fr); } }
</style>
</head>
<body>
<div class="catalog"><article class="card"><div class="visual" aria-hidden="true">CSS</div><div><h1>One reusable lesson card</h1><p>The layout follows this container, not a device name. Resize the preview, then change the catalog max-width.</p></div></article></div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS practice</title>
<style>
body { font: 1rem/1.7 system-ui; padding: 1rem; }
.catalog { container: lessons / inline-size; max-width: 55rem; margin-inline: auto; }
.card { display: grid; gap: 1rem; border: 2px solid #254fc0; padding: 1rem; }
.visual { display: grid; place-items: center; min-height: 8rem; background: #edf2f7; font-size: 2rem; }
@container lessons (min-width: 35rem) { .card { grid-template-columns: 10rem minmax(0, 1fr); } }
</style>
</head>
<body>
<div class="catalog"><article class="card"><div class="visual" aria-hidden="true">CSS</div><div><h1>One reusable lesson card</h1><p>The layout follows this container, not a device name. Resize the preview, then change the catalog max-width.</p></div></article></div>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run in new window

Loading saved work…

Edit the CSS inside the style element and compare the result in the live preview. Your work saves automatically; you can also download a local copy.

DEBUGGING CHALLENGE

Find the faulty assumption

Explain the problem and write your repair before opening the solution.

.card { container-type: inline-size; }
@container (min-width: 35rem) { .card { display: flex; } }

Reveal repair and explanation

.catalog { container-type: inline-size; }
@container (min-width: 35rem) { .card { display: flex; } }

The card needs an eligible ancestor to query. Establish containment on the wrapper rather than expecting a card to query itself.

INDEPENDENT LAB

Build it without copying

Place the same card in a narrow sidebar and a wide main area. Use a container query to enhance only the card with enough space.

Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Make a component respond to its own space lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Make a component respond to its own space</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Make a component respond to its own space lab</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Build your solution here. */
  </style>
</head>
<body>
  <main>
    <h1>Make a component respond to its own space</h1>
    <p>Replace this starter content with the structure your solution needs.</p>
  </main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Self-review checklist

The base layout works without the query.Two cards can have different layouts in the same viewport.Content remains available and readable at 200% zoom.

What did you test and change?

Loading saved work…

This lab is saved separately from the worked example. The checklist is a self-review, not an automatic grade.

CSS knowledge check

Answer both questions correctly to pass this lesson check. Account scores are recomputed on the server. This is a learning check, not certification.

1. What does a size container query normally inspect for a styled card?An eligible ancestor containerThe card's own queried sizeThe operating system name

2. When should a layout breakpoint be added?At every named device sizeWhen the content needs a different arrangementOnly at 1920px

Loading saved work…