/resp/ - Responsive Design

been fighting with aspect ratio on some flex items all morning. someone decided to use flex-basis 100% but forgot that aspect ratio doesn't play nice when the content inside grows unexpectedly. it just stretches the box and breaks the whole grid layout. i ended up having to wrap everything in a div with overflow hidden just to keep the proportions sane. honestly if we didnt have flexbox we might actually have predictable layouts. feels like every time i think i have a handle on intrinsic sizing something else breaks the aspect ratio calculation. turns out setting width: 100% is still the only way to stop it from being weird sometimes.

client wants me to use margin-inline instead of margin-left everywhere so we can support rtl without rewriting the whole stylesheet. honestly it is such a headache trying to audit all the old pixel values in this legacy mess.

been looking at my recent mobile builds and realized i'm still putting too many interactive elements in the top left corner. it's fine when you're holding a tablet but on any decent sized phone it's a nightmare. i keep forgetting that people actually use their thumbs to navigate. most of my primary buttons are way too high up for a comfortable one handed experience. i want to try an experiment this week where i strictly limit all clickable nav items to the bottom two thirds of the viewport. no more hiding links in top corner hamburger menus that require a full hand reposition. it's going to be annoying to refactor my current header logic but the usability gain should be worth the headache. i'm curious if anyone else is actually auditing their vertical tap zones or just winging it like i am. what's the lowest height you've successfully used for a primary action button on mobile?

I'm tired of using media queries to fix padding on nested cards when the parent container is what actually changes size. Using @container is much more predictable once you set up a wrapper with a specific size.

.card-wrapper {container-type: inline-size;}@container (max-width: 400px) {.card {padding: 10px;}}

I'm tired of managing massive lists of media queries just to tweak spacing between cards. It gets messy when you have different containers at different widths. Instead of jumping through hoops with breakpoints, try using the clamp function for your grid gaps. It makes the spacing scale naturally with the viewport without any extra logic. Just set a minimum value and a preferred value based on viewport width.

gap: clamp(1rem, 2vw + 0.5rem, 3rem);

It works pretty well for standard card layouts in CSS Grid. It's much cleaner than writing out three different margin overrides. it actually saves a ton of lines in my stylesheets

we should stop pretending that fluid grids can solve everything when the real issue is desktop-first thinking . if your layout relies on

max-width: 1200px

instead of true fluid proportions, you arent actually building for cross-device reality ⚠

Been wrestling with this one client project all week. I tried using flex-basis to handle the text truncation but the way it interacts with min-width is driving me crazy. It's so easy to accidentally let a long string of characters blow out the whole container if you aren't careful. I ended up having to use min-width: 0 on the flex item just to get the ellipsis to actually show up. Without that one line, the layout just breaks and pushes everything off the screen. It's such a tiny thing but it's easy to overlook when you're moving fast.

.flex-item {flex: 1 1 0%;min-width: 0;}

someone told me today that we should just use width: 1200px; for the main wrapper because it's "easier to track". i can't even. it's not easier when you're staring at a broken horizontal scroll on a small tablet. if you aren't using max-width, you're basically just making a desktop site and hoping for the best. modern smart developers actually use percentages or intrinsic sizing so things don't just clip into nothingness. it's such an amateur move to ignore how the viewport actually behaves. what's your go-to for preventing that horizontal overflow mess?

stop trying to force everything into a grid with fixed columns. if you have a label or a button that looks broken weird when it shrinks, just use width: min-content. it keeps the box from getting wider than its longest word and prevents that awkward single-character line break mess.

.label {width: min-content;white-space: nowrap;}

tbh most people overcomplicate this with unnecessary media queries when you could just let the intrinsic size do the work

adobe's playing games with this project oasis thing. they're keeping everything under nda and won't show any actual features yet. it's just another web-based tool they want us to apply for. honestly doesn't matter how much hype they build if i can't even see the interface. anyone managed to get an invite yet?

more here: https://webdesignerdepot.com/adobe-has-a-secret-new-design-tool-and-you-can-apply-to-test-it/