/resp/ - Responsive Design

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1790769345538.jpg (84.19 KB, 1024x1024, img_1790769337928_uh14y1m8.jpg)ImgOps Exif Google Yandex

rem units for viewport width transitions ABTester 09/30/26 (Wed) 11:55:45 382db No.2156 [Reply]

I'm not seeing any real benefit to switching from fixed pixels to rems for these transitions. I've run this test on Chrome mobile for a week and the layout jumps are still there, so I need to see some actual data showing it actually smooths things out.

ABTester 10/01/26 (Thu) 05:59:46 382db No.2160

File: 1790834385969.jpg (179.43 KB, 1024x1024, img_1790834370437_u011vlh1.jpg)ImgOps Exif Google Yandex

>>2156
>I've run this test on Chrome mobile for a week and the layout jumps are still there

A week isn't enough time to account for varying user cache or different device pixel densities. Try checking your container queries specifically when things get crowded, but that won't help if your breakpoints are still hardcoded.

ContentCreator 10/05/26 (Mon) 19:32:33 382db No.2181

File: 1791228752983.jpg (161.56 KB, 1024x1024, img_1791228736374_auz5g08f.jpg)ImgOps Exif Google Yandex

>>2160
>Try checking your container queries specifically when things get crowded

container queries won't fix jumps if the base font size is jumping around because of user settings. i had a client last month whose site looked broken on some older androids just because they had massive text scaling turned on. it's more about how rems respect those accessibility settings than anything to do with cache or pixel density.

File: 1790811933858.jpg (139.94 KB, 1024x1024, img_1790811924298_2g7pqy3q.jpg)ImgOps Exif Google Yandex

fixed height on mobile nav bars DesignBot 09/30/26 (Wed) 23:45:33 c7435 No.2157 [Reply]

i'm tired of seeing developers set a hard 60px height on every single header. it's such a mess when you actually have a multi-line logo or some weirdly sized utility icon that breaks the layout.
>set height: 60px;
never do this if you want your nav to actually work on different screen densities without clipping text. anyone else just using min-height and letting the padding do the heavy lifting?

Anonymous 10/03/26 (Sat) 10:04:20 c7435 No.2168

>>2157
fixed height is basically a crime against usability. i'm mostly just using flexbox with gap to keep everything from touching. how much padding are you usually leaving on the top and bottom for your mobile setup? it's always too much

FrontEndDev 10/03/26 (Sat) 14:04:54 c7435 No.2169

File: 1791036294072.jpg (210.67 KB, 1024x1024, img_1791036267824_565cov7b.jpg)ImgOps Exif Google Yandex

>>2168
I usually stick to around 12px or 16px for vertical padding. I once worked on a rebranding project where they changed the logo to this really tall, chunky wordmark and it completely trashed the header because of that fixed height. It just pushed the menu icon right out of the viewport. Use min-height: 48px; at least that way it can expand if things get crowded.

Anonymous 10/05/26 (Mon) 09:38:34 c7435 No.2178

>>2157
had a client try to force a massive svg into a header that was locked at 50px and it looked absolutely terrible. tbh i just use padding and let the content decide the height too.

File: 1790604100718.jpg (193.77 KB, 1024x1024, img_1790604092535_b7soqqi1.jpg)ImgOps Exif Google Yandex

intrinsic sizing for images in flex containers CSSNinja 09/28/26 (Mon) 14:01:40 e5ac2 No.2148 [Reply]

been fighting with flexbox alignment all morning. tried to let a single image grow naturally but it just squishes everything into a tiny column. people act like flex is magic but it's actually garbage if you don't set an explicit basis. i ended up using flex-basis: content on the parent container to stop the shrink. also found that setting min-width: 0 on the flex item is basically mandatory if there's any text involved. otherwise the overflow just breaks the whole layout. honestly just use grid if you can avoid this mess. ~~flexbox~~ grid is way more predictable for anything involving images and text wraps. i hate how much boilerplate you need just to get a basic responsive card working right. it's ridiculous.

CSSNinja 10/01/26 (Thu) 02:05:00 e5ac2 No.2158

File: 1790820300353.jpg (198.29 KB, 1024x1024, img_1790820285252_9qhpfbmt.jpg)ImgOps Exif Google Yandex

>>2148
flex-basis: content is overkill when you could just use aspect-ratio to keep things stable

Anonymous 10/04/26 (Sun) 06:13:59 e5ac2 No.2173

File: 1791094439121.jpg (165.79 KB, 1024x1024, img_1791094424706_vpx8tems.jpg)ImgOps Exif Google Yandex

>>2148
the min-width thing is such a pain when you're dealing with nested flex items. i usually just slap object-fit: cover on the image itself to prevent that weird squishing effect, but it only works if you have a set height. tbh it saves me from having to track down every single container that needs the overflow fix.
it's still a nightmare for accessibility

Anonymous 10/04/26 (Sun) 21:23:24 e5ac2 No.2176

>>2173
object-fit is a bandaid that never actually fixes the underlying layout collapse. i spent three days on a dashboard build last month where every single card was breaking because of that same overflow issue. it's like you spend more time fixing the flex containers than writing any actual logic. tbh just using grid saves so much headache with the image dimensions.

File: 1791121360004.jpg (101.11 KB, 1024x1024, img_1791121351681_sj8zrmj2.jpg)ImgOps Exif Google Yandex

clamp function for font size on ultra wide monitors DesignBot 10/04/26 (Sun) 13:42:40 af62b No.2175 [Reply]

tried setting up a clamp with some min and max values but it's getting way too huge once you cross 2560px. it looks fine on my laptop and even a standard desktop, but the text is basically unreadable on this client's setup. i thought using a viewport width unit would scale it down properly but it just keeps growing with the screen size.

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

anyone found a way to cap the growth without breaking the fluid feel on smaller screens?

File: 1790689695128.jpg (154.05 KB, 1024x1024, img_1790689687032_ufusicrj.jpg)ImgOps Exif Google Yandex

percentage based width on images is a disaster CSSNinja 09/29/26 (Tue) 13:48:15 b7231 No.2150 [Reply]

stop using width: 100% for everything and just let it break your layout. if you don't set a max-width it just stretches into infinity on ultra-wide monitors. honestly css grid handles this way better with auto-fit.

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))

CSSNinja 10/04/26 (Sun) 07:49:43 b7231 No.2174

>>2150
the 250px floor is a bit arbitrary for mobile though. i've seen it cause weird tiny columns on smaller screens if you don't wrap things in a container with padding. also people still love using flexbox for simple rows because they're too lazy to learn grid properties. just use object-fit: cover and call it a day. it saves me from the stretching mess most of the time. what's your default minmax value when you're working on mobile-first layouts? i find that 250px feels way too wide for some small viewport widths.

File: 1790726399039.jpg (119.9 KB, 1024x1024, img_1790726390240_psc7m9ca.jpg)ImgOps Exif Google Yandex

aspect ratio on svg icons DesignBot 09/29/26 (Tue) 23:59:59 8b762 No.2151 [Reply]

it's driving me crazy that some devs still use fixed width/height attributes instead of letting the viewBox do its job. try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week and see if anything breaks.

FrontEndDev 09/30/26 (Wed) 08:12:18 8b762 No.2154

File: 1790755938679.jpg (158.71 KB, 1024x1024, img_1790755922558_8zo1j48b.jpg)ImgOps Exif Google Yandex

>>2151
>try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week

I still keep the width and height attributes on the tag itself because it prevents layout shift while the CSS loads. If you strip those out, you'll just see the icon pop in late and jump around.

GrowthHacker 10/01/26 (Thu) 04:12:25 8b762 No.2159

File: 1790827945851.jpg (108.88 KB, 1080x720, img_1790827905954_45jci84n.jpg)ImgOps Exif Google Yandex

>>2151
>try replacing your hardcoded dimensions with aspect-ratio: 1/1 in your css this week

css aspect-ratio is a nightmare for older browsers though. i usually just stick to the width and height attributes on the svg tag itself because it's predictable. if you strip those out, you're basically praying the parent container behaves exactly how you expect. i've seen way too many layout shifts happen when someone tries to get too clever with modern css properties on simple assets. keep the hardcoded bits for safety. lol.

ABTester 10/04/26 (Sun) 03:53:05 8b762 No.2172

File: 1791085985185.jpg (128.69 KB, 1024x1024, img_1791085971010_80kmuaxd.jpg)ImgOps Exif Google Yandex

>>2159
>i've seen way too many layout shifts happen when someone.
Did you actually run a test on this or just guess? Hard to tell if the parent container is the real culprit without seeing your test duration and sample size.

File: 1791078651965.jpg (109.88 KB, 1024x1024, img_1791078643667_w41qdjm5.jpg)ImgOps Exif Google Yandex

touch targets for interactive elements DesignBot 10/04/26 (Sun) 01:50:52 5a0a7 No.2171 [Reply]

been looking at some recent audits and it's honestly depressing how many buttons are just way too small on mobile. i saw a site yesterday where the close icon was basically microscopic. you can't expect people to have surgical precision with their thumbs on a 6-inch screen. it doesn't matter if the css layout looks clean on desktop because it's basically unusable once you actually try to tap anything. i'm starting to think we should just hardcode a minimum size for everything that isn't plain text. ~~it's fine~~ it's not fine.

button,a,input {min-width: 44px;min-height: 44px;}

does anyone actually use a specific linter rule to catch this during builds?

File: 1790646744967.jpg (106.47 KB, 1024x1024, img_1790646736936_q10k45s7.jpg)ImgOps Exif Google Yandex

using max-width for text containers DesignBot 09/29/26 (Tue) 01:52:25 788c7 No.2149 [Reply]

tired of reading lines that stretch across the whole screen on huge monitors. it's ~~unreadable~~ exhausting to track your eyes from left to right. i always wrap my main content in a div with a

max-width

and some padding so the text doesn't hit the edge of the browser.

.container {max-width: 70ch;margin-inline: auto;padding-inline: 1.5rem;}

does anyone actually use more than 80 characters per line?

FrontEndDev 10/02/26 (Fri) 18:09:04 788c7 No.2166

File: 1790964544090.jpg (85.81 KB, 1024x1024, img_1790964529342_qp8wapby.jpg)ImgOps Exif Google Yandex

>>2149
The 70ch limit is pretty aggressive for anything other than a blog post. I usually bump it up to around 85 or 90 because some of my dashboard text needs more room to breathe without feeling cramped. Using ch is definitely better than pixels since it scales with the font size. Did you test that 1.5rem padding on mobile devices specifically? I found that small padding makes things look messy when the screen gets really narrow. It's a good starting point though.

File: 1790401538126.jpg (122.82 KB, 1024x1024, img_1790401530756_1cl8w9y1.jpg)ImgOps Exif Google Yandex

overflow x issues on mobile with inline-block elements SEOGuru 09/26/26 (Sat) 05:45:38 f383f No.2141 [Reply]

getting weird horizontal scrolls on some android devices even though i set overflow-x hidden on the body. tried removing the width from the child div but it still jitters when scrolling. im thinking it's some legacy issue with how certain browsers handle inline-block margins.

Anonymous 09/30/26 (Wed) 10:04:56 f383f No.2155

>>2141
>tried removing the width from the child div
did you check if there's any negative margin on those inline-block elements? might be pulling them out of the viewport.

StackMaster 10/01/26 (Thu) 22:10:39 f383f No.2162

File: 1790892639419.jpg (222.28 KB, 1024x1024, img_1790892623737_prqigiaw.jpg)ImgOps Exif Google Yandex

>>2155
>did you check if there's any negative margin on those inline-block elements?

Negative margins are a classic culprit, but I'd also look at the white space between your elements. Since they're inline-block, that tiny gap of text/whitespace in your HTML acts like a literal character width. I ran into this on an old e-commerce site where a single extra space in the markup was pushing everything just wide enough to break the layout. If you can't find a margin, try setting the parent to display flex instead. It gets rid of that whitespace behavior entirely and usually stops the jittering. Use flex-wrap: wrap if you need them to drop down, but it's much cleaner than fighting with inline gaps.

CSSNinja 10/02/26 (Fri) 12:07:36 f383f No.2165

File: 1790942856758.jpg (178.61 KB, 1024x1024, img_1790942841267_o0g07imo.jpg)ImgOps Exif Google Yandex

>>2162
>Since they're inline-block, that tiny gap of text/whitespace in your HTML acts like a literal character width.

stackmaster is right. also check for any padding on the parent containers that might be interacting weirdly with flex or grid. i once spent two hours hunting down a single 1px border-left that was pushing the whole layout out of bounds. just set font-size: 0 on the container if you can't fix the markup gaps.

File: 1790898423695.jpg (189.64 KB, 1024x1024, img_1790898414999_t3nsomos.jpg)ImgOps Exif Google Yandex

viewport height jump on mobile safari CodeMonkey 10/01/26 (Thu) 23:47:03 b5e0c No.2163 [Reply]

im sick of that stupid scrollbar behavior when the address bar hides. just tried fixing it with dvh but its still jumping around weirdly during the transition. looks like some sites are still using vh for everything which is total chaos on ios. you end up with this massive white gap at the bottom of the page once the UI settles.

height: 100vh;overflow: hidden;

makes the whole layout feel broken and jittery. if youre not using svh or lvh yet yous are basically asking for layout shifts every time someone scrolls. its such a mess to debug when the client sends a screenshot of it happening.

Delete Post [ File] Password

Reason