You’re Doing Responsive Design Wrong…

This content originally appeared on Level Up Coding – Medium and was authored by Sunil Soundarapandian

You’re Doing Responsive Design Wrong (Until You Use Container Queries)

Forget media queries. CSS Container Queries are the real game-changer your components have been begging for.

Wait, What Are Container Queries?

You know how media queries let you style elements based on the viewport size?

Now imagine if your component could adapt based on its own container size not the window.

@container (min-width: 300px) {
  .card {
    flex-direction: row;
  }
}

Boom. Now your .card layout changes only when its parent grows regardless of screen size.

Real-Life Example: Why Container Queries Matter

Let’s say you’re building a reusable card component that lives inside a sidebar and inside a full-width page.

With media queries, you’d write:

@media (min-width: 768px) {
  .card {
    flex-direction: row;
  }
}

But this assumes that the entire screen is 768px wide not the actual card’s parent.

With container queries:

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

@container (min-width: 300px) {
  .card-content {
    flex-direction: row;
  }
}

Now your component is smart, flexible, and context-aware. Welcome to the future.

Browser Support? You Might Be Surprised

According to Can I Use , as of now, Container Queries are supported by over 92% of users globally! So yes if you’re targeting modern users, you’re good to go.

How to Use Container Queries in 2 Steps

1. Enable a container

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

2. Write a query

@container (min-width: 300px) {
  .card-content {
    font-size: 1.2rem;
  }
}

When Should You Use Container Queries?

Use Container Queries when your component’s layout should adapt to its parent size not the viewport.

1. Reusable components (cards, widgets, tables) inside sidebars and main content — They adapt their layout based on the parent container width
2. They adapt their layout based on the parent container width — Layout shifts only when needed, not based on screen size
3. Dashboards with resizable panels or sidebars — Panels adjust based on available space, not global breakpoints
4. Embeddable widgets or components in iframes — Viewport size is irrelevant container size matters
5. Micro frontends or CMS blocks — Tokens/components styled in isolation, making layout predictable

Avoid Using Container Queries If:

1. You’re targeting legacy browsers like IE or UC Browser
2. You only need simple responsive tweaks (like body font sizes)
3. You don’t have control over parent containers (e.g., 3rd-party embeds)

You’re Doing Responsive Design Wrong… was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

This content originally appeared on Level Up Coding – Medium and was authored by Sunil Soundarapandian