Stop Fighting with Media Queries! Use CSS Container Queries Instead

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;

  }

}

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 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! 👇