How can I make a layout respond to its container instead of the viewport?

Use a size container around the component, then query that container’s width. A viewport media query responds to the viewport; a size-based @container rule responds to the size of an eligible containing element. This is useful when the same card can appear in places with different widths on the same page. [S1]

For example, give the card’s wrapper container-type: inline-size, then put the query on the card inside it:

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

@container (max-width: 34rem) {
  .product-card {
    grid-template-columns: 1fr;
  }
}

Here, 34rem is an example threshold, not a universal breakpoint. Adjust it to the point where this card’s content needs a different arrangement. Make sure .product-card is a descendant of .card-region and is set up as a grid.

Choose the element whose available inline size should control the component. In a typical horizontal writing mode, that corresponds to width. Often it is a wrapper around the card, widget, or embedded panel. The size-query container must be explicitly established; container-type: inline-size enables queries based on its inline size. [S2]

One important detail: the query styles descendants of the container, not the container itself. So if the layout change needs to affect the card, put the queryable wrapper outside the card. If you make the card itself the container, its query will target elements inside it instead. Identify what gets narrow in the actual layout, then place the container boundary there.

It can be a concern: size containment means the container’s size needs to come from its context or be explicitly set; otherwise it can collapse. [S2] Check that the wrapper gets a usable width from its surrounding layout. The appropriate sizing fix depends on that layout, so inspect the wrapper’s size rather than assuming the query threshold is the problem.

A practical debugging sequence is: confirm the wrapper has nonzero width; confirm it has container-type: inline-size; then check whether the query condition is met and whether the element you want to style is a descendant. These checks help distinguish a setup issue from a threshold that does not fit your design.

Use a container query when the component’s layout should follow its own available space. Keep a viewport media query for changes driven by the overall viewport or device characteristics, such as a page-level arrangement. They address different contexts. [S1]

Here is a pattern to adapt. Replace the class names and threshold to suit your component:

.panel-slot {
  container-type: inline-size;
}

.info-card {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
}

@container (max-width: 32rem) {
  .info-card {
    grid-template-columns: 1fr;
  }
}

To tune it, resize the parent area rather than only the browser window. Pick a threshold where the two-column version becomes crowded, and check the card in each place it appears.