/resp/ - Responsive Design

tried using auto-fit but the items aren't stretching to fill the whole row like they should. it leaves this weird huge empty space on the right side of the container when there's only one item left.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));gap: 20px;

anyone know a way to force that last row to center or something?

been messing around with container queries all morning. everyone's obsessed with viewport units but they're such a nightmare when you actually nest things inside sidebars or cards. if the parent shrinks, your text stays huge and breaks everything. i stopped using @media for component typography entirely. it's much better to just scope the font size to the container itself so it scales naturally regardless of where you drop the component in the layout.

.card-container {container-type: inline-size;}@container (max-width: 400px) {.card-title {font-size: 1.2rem;}}

it's not a magic fix for everything but it's perfect pretty much essential for modular design. i use this specifically for card grids where the columns collapse at different breakpoints. you don't have to write fifty different media queries for every possible screen width. just define the container and let the component handle its own business. works great for those weirdly sized sidebar widgets that nobody wants to manage manually. anyone else still relying on global media queries for component styles?

I am tired of seeing developers set breakpoints based on arbitrary device sizes like iPhone or iPad. It is much harder to debug when your layout breaks on a random tablet width that does not match any specific breakpoint in your stylesheet. Just use the actual content boundaries to decide where things need to shift.

been messing with some old legacy layouts today. i've been trying to move away from those old padding-top hacks for aspect ratios because they're such a headache when you actually need the content to behave. using the modern aspect-ratio property is way cleaner, but it's driving me crazy when the source images aren't perfectly sized. if you don't pair it with object-fit: cover, you just get these stretched, ugly distortions that look terrible on high-density mobile screens.

.card-img {aspect-ratio: 16 / 9;object-fit: cover;}

it's much easier than managing the old padding trick. at least until the browser decides to ignore your life's work. does anyone actually still use the padding hack for anything?

tried switching everything to margin-inline and padding-block today because i'm tired of writing separate rules for ltr and rtl. it's way cleaner when you don't have to manually swap left and right values in your media queries. honestly, just use logical properties from now on so you don't break the layout when someone switches the language settings.

i'm tired of manually adjusting every single breakpoint just to keep text readable on tablets. using 'clamp' makes things way smoother but it's such a headache when the scaling gets too aggressive at the edges.

font-size: clamp(1rem, 5vw + 0.5rem, 2.5rem);

does anyone actually use fixed rem values for body text anymore?

I'm working on this legacy mobile site and the footer icons are tiny. I tried adding padding to the anchor tags but it's messing up my flex alignment in the footer. It makes the whole row taller than it should be. I don't want to change the actual icon dimensions, just need a larger hit area without breaking the layout. I've been trying this:

a {padding: 12px;display: inline-block;}

But now the icons aren't centering vertically with the text next to them. Is there a better way to expand the tap area using something like an invisible pseudo-element? I need it to stay strictly within the bounds of the existing icon container.

it's wild that we can basically ditch those complex sizes attributes since the browser finally knows the layout once it hits the viewport. i'm still skeptical about how this works if we aren't using loading="lazy" on every single element, but webkit and gecko getting on board with these patches makes it feel inevitable. do you guys actually strip out your srcset logic for footer images yet?

link: https://cloudfour.com/thinks/ending-responsive-images/

stop using 1fr for everything when you have long strings of text without breaks. it just blows out the whole layout on small screens. use min-content for that specific track so the column actually respects the content boundaries instead of stretching into infinity. tbh it saves me from writing way too many media queries.

i'm tired of seeing vh used for font sizes on mobile. it makes the text jump around like crazy when the browser chrome hides or shows during a scroll. it's better to just stick to rem and let the base size handle it. has anyone actually found a way to make viewport-based type work without it looking broken?