DEV Community

Cover image for Stop Fighting with Media Queries! Use CSS Container Queries Instead
Amaresh Adak
Amaresh Adak

Posted on

Stop Fighting with Media Queries! Use CSS Container Queries Instead

#css #webdev #frontend #tutorial

Ever built a component that looks perfect in your main content but breaks in the sidebar? 😩

Media queries only solve half the problem - they care about screen size, not where your component actually lives. That's where Container Queries come in.

What's Wrong with Media Queries?

Let's say you've built this card component:

@media (min-width: 768px) { .card { display: flex; gap: 2rem; } }
Enter fullscreen mode Exit fullscreen mode

Looks great on mobile and desktop! Until... your teammate puts it in a narrow sidebar. Now your "desktop" layout is trying to squeeze into a 300px space. Ouch.

Looking to boost your CSS skills? Check out "Modern CSS Techniques That Replaced My JavaScript" to see how pure CSS can replace complex JavaScript code.

Container Queries: The Better Way

Instead of asking "how wide is the screen?", Container Queries ask "how wide is my container?" Here's how they work:

/* Step 1: Mark the container */ .card-wrapper { container-type: inline-size; } /* Step 2: Style based on container width */ @container (min-width: 400px) { .card { display: flex; gap: 2rem; } }
Enter fullscreen mode Exit fullscreen mode

Now your card adapts to its container, not the screen. Put it anywhere - it just works!

Real Example: A Smart Product Card

Here's a product card that adapts to any space:

<div class="product-wrapper"> <div class="product"> <img src="product.jpg" alt="Cool Product"> <div class="content"> <h2>Awesome Headphones</h2> <p class="price">$99</p> <p class="desc">Noise-canceling magic for your ears</p> <button>Add to Cart</button> </div> </div> </div>
Enter fullscreen mode Exit fullscreen mode 
.product-wrapper { container-type: inline-size; } /* Mobile-first: Stack everything */ .product { display: grid; gap: 1rem; padding: 1rem; background: white; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } /* Medium container: Side-by-side layout */ @container (min-width: 400px) { .product { grid-template-columns: 200px 1fr; } } /* Large container: More sophisticated layout */ @container (min-width: 600px) { .product .content { display: grid; grid-template-columns: 1fr auto; align-items: start; } .product .desc { grid-column: 1 / -1; } }
Enter fullscreen mode Exit fullscreen mode

Browser Support?

Good news! Container Queries work in all modern browsers. For older browsers, your mobile layout becomes the fallback:

/* Default mobile layout */ .product { display: grid; } /* Enhance for modern browsers */ @supports (container-type: inline-size) { /* Container query styles */ }
Enter fullscreen mode Exit fullscreen mode

Want to nail those UI details? "12 Frontend Micro-Interactions That Users Secretly Judge" reveals the subtle interactions that make websites feel polished.

Quick Tips

  1. Don't nest container queries too deep - it gets messy
  2. Use inline-size instead of size when you only need width
  3. Test your components in different-sized containers

Try It Yourself!

  1. Pick a component that lives in multiple places
  2. Add container-type: inline-size to its wrapper
  3. Replace media queries with container queries
  4. Watch it adapt automatically!

Want to Learn More?

Drop a comment if you build something cool with Container Queries! 👇

Top comments (0)