[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/resp/ - Responsive Design

Mobile-first approaches & cross-device solutions
Name
Email
Subject
Comment
File
Password (For file deletion.)

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

c7435 No.2157

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?

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

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.

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.



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]