Meta tags:
description=Media queries have always felt wrong — why does a sidebar card care about the browser window width?... Tagged with css, webdev, webdesign, ui.;
keywords=css, webdev, webdesign, ui, software, coding, development, engineering, inclusive, community;

Headings (most frequently used words):

container, queries, are, here, and, they, re, game, changer, dev, community, the, problem, with, media, query, units, browser, support, top, comments, more, from, monalisa, das,

Text of the page (most frequently used words):
the (24), container (24), and (16), card (15), dev (12), #queries (12), you (9), width (9), share (6), with (6), for (6), media (6), size (6), this (5), #comment (5), like (5), flex (5), community (4), code (4), webdev (4), react (4), not (4), layout (4), component (4), inline (4), fullscreen (4), mode (4), 1rem (4), create (3), 2026 (3), software (3), that (3), use (3), about (3), space (3), your (3), than (3), can (3), more (3), monalisa (3), das (3), write (3), how (3), abuse (3), hide (3), comments (3), are (3), copy (3), link (3), sep (3), game (3), justin (3), wilson (3), wrapper (3), query (3), browser (3), narrow (3), viewport (3), 400px (3), sidebar (3), gets (3), they (3), account (2), log (2), where (2), their (2), conduct (2), every (2), already (2), does (2), from (2), may (2), joined (2), developer (2), follow (2), will (2), post (2), still (2), via (2), report (2), need (2), rules (2), menu (2), let (2), has (2), different (2), block (2), add (2), overrides (2), see (2), much (2), type (2), respond (2), have (2), support (2), there (2), also (2), exit (2), enter (2), 2rem (2), cqw (2), clamp (2), font (2), stays (2), min (2), scales (2), screen (2), units (2), image (2), 160px (2), even (2), side (2), when (2), direction (2), step (2), name (2), responds (2), element (2), grid (2), here (2), changer (2), search (2), place, coders, stay, date, grow, careers, made, love, 2016, ruby, rails, built, powers, other, inclusive, communities, open, source, forem, terms, privacy, policy, mlh, shop, free, postgres, database, contact, showcase, organization, accounts, advertise, help, education, tracks, videos, challenges, home, discuss, keep, development, manage, career, review, wasn, designed, volume, agentic, codereview, stop, manually, memoizing, callback, compiler, better, javascript, reactcompiler, performance, patterns, day, typescript, webperf, maharashtra, india, location, before, single, line, looked, requirement, four, angles, stakeholder, architect, checklist, think, further, actions, consider, blocking, person, reporting, confirm, child, well, sure, want, become, hidden, but, visible, permalink, reply, button, test, zoom, text, expansion, keyboard, focus, because, components, fail, accessibility, dropdown, focused, playful, tools, build, experiment, what, learn, expand, collapse, dismiss, preview, submit, templates, quickly, answer, faqs, store, snippets, template, trusted, user, personal, subscribe, top, start, finding, one, codebase, layouts, depending, placed, header, its, replace, once, simpler, becomes, won, back, action, resize, watch, stackblitz, com, early, 2024, global, chrome, 105, firefox, 110, safari, longer, any, reason, avoid, them, production, polyfill, solid, remaining, edge, cases, wide, grows, proportionally, caps, title, introduced, new, length, these, elements, rather, typography, dream, relative, cqmax, cqmin, cqb, cqi, cqh, shrink, center, align, items, room, row, fires, regardless, gap, default, stacked, containers, column, display, nested, target, only, most, common, declare, which, imagine, 280px, hero, 800px, know, each, usage, specific, simply, actually, context, blogcard, problem, years, hacked, around, fundamental, limitation, lives, inside, behaved, identically, same, full, though, available, was, completely, always, felt, wrong, why, care, window, solve, elegantly, now, supported, everywhere, webdesign, css, originally, published, monalisadas, knowme, vercel, app, posted, mastodon, facebook, linkedin, copied, clipboard, pick, gem, boost, save, jump, fire, raised, hands, exploding, head, unicorn, reaction, close, powered, algolia, navigation, skip, content,

Text of the page (random words):
container queries are here and they re a game changer dev community skip to content navigation menu search powered by algolia search log in create account dev community close add reaction like unicorn exploding head raised hands fire jump to comments save boost pick as gem more copy link copy link copied to clipboard share to x share to linkedin share to facebook share to mastodon share post via report abuse monalisa das posted on sep 15 originally published at monalisadas knowme vercel app container queries are here and they re a game changer css webdev webdesign ui media queries have always felt wrong why does a sidebar card care about the browser window width container queries solve this elegantly and they re now supported everywhere for years we hacked around a fundamental limitation media queries respond to the viewport not the container an element lives in a card component inside a narrow sidebar behaved identically to the same card in a full width grid even though the available space was completely different the problem with media queries imagine a blogcard component in a sidebar it gets 280px in a grid it gets 400px in a hero it gets 800px with media queries you d need to know the context of each usage and write specific overrides with container queries the card simply responds to how much space it actually has step 1 declare which element is the container inline size responds to width only most common card wrapper container type inline size container name card name it so nested container can target it card display flex flex direction column default stacked layout for narrow containers gap 1rem step 2 query the container s size not the viewport this fires when card wrapper is 400px regardless of screen width container card min width 400px card flex direction row side by side when there s room align items center card image width 160px flex shrink 0 image stays 160px even in flex layout enter fullscreen mode exit fullscreen mode container query units container queries also introduced new length units cqw 1 of container width cqh cqi inline cqb block cqmin and cqmax these let you size elements relative to their container rather than the viewport a typography dream card title font scales with the card width not the screen clamp min 1rem scales at 4 of container width caps at 2rem in a narrow container stays at 1rem wide container grows proportionally font size clamp 1rem 4 cqw 2rem enter fullscreen mode exit fullscreen mode browser support as of early 2024 container queries have 92 global browser support chrome 105 firefox 110 safari 16 there s no longer any reason to avoid them in production the polyfill is also solid for the remaining edge cases stackblitz com see container queries in action resize the container and watch the card layout respond start by finding one component in your codebase that has different layouts depending on where it s placed a card a header a media block add container type inline size to its wrapper and replace the media query overrides with container rules once you see how much simpler the component becomes you won t go back top comments 1 subscribe personal trusted user create template templates let you quickly answer faqs or store snippets for re use submit preview dismiss collapse expand justin wilson justin wilson justin wilson follow game developer focused on playful tools i build experiment and write about what i learn joined sep 10 2026 sep 16 dropdown menu copy link hide container queries need more than layout rules test zoom text expansion and keyboard focus because components can still fail accessibility like comment like comment 1 like like comment button reply code of conduct report abuse are you sure you want to hide this comment it will become hidden in your post but will still be visible via the comment s permalink hide child comments as well confirm for further actions you may consider blocking this person and or reporting abuse monalisa das follow before i write a single line of code i ve already looked at the requirement from four angles developer qa stakeholder and architect that s not a checklist it s how i think location maharashtra india joined may 3 2026 more from monalisa das react performance patterns i use every day react webperf webdev typescript stop manually memoizing every callback the react compiler already does it better than you can react reactcompiler javascript webdev code review wasn t designed for this volume ai codereview agentic webdev dev community a space to discuss and keep up software development and manage your software career home dev challenges dev videos dev education tracks dev help advertise on dev organization accounts dev showcase about contact free postgres database dev shop mlh code of conduct privacy policy terms of use built on forem the open source software that powers dev and other inclusive communities made with love and ruby on rails dev community 2016 2026 we re a place where coders share stay up to date and grow their careers log in create account