Container Query min-width: 400px — Card Layout Switch

min-width: 400px — The Most Common Card Breakpoint

400px is the practical sweet spot where a card stops being a "phone-sized stack" and gains enough room to show an image side-by-side with text. This guide drills into a single, focused rule rather than a multi-step grid.

The HTML

<div class="card-host">
  <article class="card">
    <img src="/cover.jpg" alt="" />
    <div class="card-body">
      <h3>Article title</h3>
      <p>Lead paragraph...</p>
    </div>
  </article>
</div>

The CSS

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

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

@container (min-width: 400px) {
  .card {
    flex-direction: row;
    align-items: flex-start;
  }
  .card img {
    width: 40%;
    max-width: 200px;
  }
}

Why 400px Specifically?

At widths below 400px the image plus a usable text column produces line lengths under ~25 characters — too cramped for readable copy. Above 400px you get roughly 200px of image and 200px of text with comfortable padding. Smaller cards (e.g., a 320px tile in a sidebar) stay vertical, while medium hosts switch to the horizontal variant automatically.

One Container, Many Hosts

The same card markup works in:

• A 320px sidebar slot — stays vertical
• A 480px main column — flips horizontal
• A 600px featured slot — flips horizontal

No JavaScript, no media queries, no per-page tweaks. This is the headline benefit of container queries: a card that "knows its place".

Pitfall: Don't Forget container-type

If you forget container-type: inline-size on the host, the @container rule simply never fires — silently. Always pair the host declaration with the query.