Refactor a card to respond locally
Refactor a viewport-bound card into a container-query-driven component.
A reusable deal card uses a viewport media query, so a narrow sidebar card renders in its desktop horizontal layout. Use container queries when a component's layout depends on local slot width rather than viewport width. The common trap is adding page-specific overrides for every placement. That fixes one slot while making the component less reusable. Before @media (min-width: 768px) { .deal-card { grid-template-columns: auto 1fr auto; } } assumes every desktop viewport gives the card desktop space. After .deal-card-slot { container-type: inline-size; } @container (min-width: 34rem) { .deal-card { grid-template-columns: auto 1fr auto; } } makes the card respond…
Sign up free — one personalized lesson every day, matched to your role and goals.
Already have an account? Sign in