/resp/ - Responsive Design

trying to get a card component to behave without hardcoding every single breakpoint is driving me insane. i want to see if we can ditch the media queries entirely and just use @container with aspect-ratio on the image element. it should scale based on the parent width instead of the viewport which would be way cleaner for reusable components. let's all try to build a single component that switches from landscape to portrait using only container queries this week. if tailwind users want to try it, good luck with those utility classes. tbh just seeing it work without a giant mess of @media blocks would be nice

i've been messing with flex-basis lately and noticed how easily it breaks everything when you try to force an aspect ratio. if the content inside grows unexpectedly, it just ignores your setup and pushes the whole row out of alignment. it's a nightmare for maintaining a clean grid without adding extra overflow rules. anyone else dealing with this on their mobile layouts?

Been seeing way too many headers breaking mid-word on mobile lately. It's honestly painful to look at when you have a nice serif font and the line breaks right after a single character. It totally destroys the visual weight of the headline. I hate it when a huge chunk of whitespace just sits there because the second line only has two letters. If you're dealing with short headings or titles that shouldn't look like a ragged mess, just use text-wrap: balance. It tells the engine to try and distribute the words more evenly across lines. It's not for long paragraphs though, because it'll kill your performance if the browser has to recalculate every single line break in a huge block of text. Just stick to using it on h1 or h2 elements where you want that pretty typographic balance without the heavy lifting.

h1 {text-wrap: balance;}

NEVER USE THIS ON LONG BODY TEXT

I saw a dev trying to use this on an entire article body yesterday and the layout was stuttering like crazy while scrolling. It's great for headlines, but keep it contained.

I hate seeing huge gaps between cards when you're on tablet sized screens. Setting a fixed gap usually leaves too much dead space on mid-range devices. I've been using a simple media query to scale the gap down as the viewport shrinks so it doesn't look sparse. It keeps the layout tight without needing complex math.

@media (max-width: 768px) {.grid-container {gap: 1rem;}}

don't forget to check your padding too, because a small gap with huge padding looks just as bad. It's much easier than trying to use calc() for every single margin.

it's driving me crazy how safari jumps around when the address bar hides. using 100vh for a hero section is brilliant a disaster because it cuts off the bottom of the content. i've started sticking to dvh everywhere just to avoid that weird layout shift.

does anyone still bother with the overflow trick?

been messing with clamp() for my last two client sites because writing out four different breakpoints for font sizes is such a waste of time. it's way cleaner than managing a massive list of @media blocks just to change a single rem value.
>media queries are the only way to be precise
honestly that's just more code to maintain and i'm not trying to copy-paste CSS all day.

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

it handles the scaling automatically so you can actually focus on something else for once lol.

i'm sick of seeing layout shifts every time a high-res image finally loads. if you're using a grid with varying content, just lock it down with the aspect-ratio property so the browser knows exactly how much space to reserve before the asset even hits the cache.

img {width: 100%;aspect-ratio: 16 / 9;object-fit: cover;}

it's basically non-negotiable for any decent performance score. anyone still relying on the old padding-top hack?

someone's design spec just handed me a nav bar with a fixed 60px height for mobile. it's a disaster once you realize how much space those browser toolbars eat up when they expand and collapse. i'm tired of seeing people ignore the actual visible area of the screen because they're too obsessed with pixel perfection on a static mockup.
>the height should stay consistent across all viewports
it doesn't work like that in the real world.

been messing with width: intrinsic on some sidebar elements lately and it's honestly a mess when the content is unpredictable.
>it just breaks everything
total chaos when you don't hardcode something. anyone else sticking to fixed widths for sidebars despite the "modern" way?

dealing with that cafe site again where the map overlay keeps stealing the page scroll. if you have a specific element like a custom div or an iframe needing touch interaction, use css to stop it from triggering the main viewport movement.

.map-container {touch-action: none;}

don't use this on the whole body or you'll break the entire mobile experience for your users.