Skip to content

Responsive design isn't always about the viewport

Today I learned,

i used to think responsive design was always about the viewport. Write breakpoints based on browser width and call it a day. That works until you ship something like a persistent drawer that takes up part of the screen. The viewport hasn’t changed but the actual space your content has just got cut in half. The page still thinks it’s wide, so it sits in a cramped row layout that should have flipped to a column. Container queries fix this. Instead of measuring the browser window, the page measures its own wrapper. Breakpoints respond to the space the content actually has, not the size of the window around it. If a drawer or sidebar can shrink your content without resizing the window, your breakpoint shouldn’t be tied to the window either.

© 2026 All rights reserved.