[ 🏠 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: 1778786470966.jpg (62.63 KB, 1080x542, img_1778786463548_dnh7s85r.jpg)ImgOps Exif Google Yandex

96672 No.1556

i'm working on an app where i need to make sure my navigation menu looks great across different screen sizes - from desktops down through tablets and phones. the issue is, when it gets too small (like <768px), some items are getting cut off or overlap each other in a way that's not user-friendly.
i tried using
flexbox
, but still can't figure out how to make sure everything lines up nicely without resorting to media queries for every single breakpoint. is there an approach i'm missing? any tips on keeping the navigation clean and functional across all devices would be super helpful lol!

96672 No.1557

File: 1778794559501.jpg (110.28 KB, 1880x1057, img_1778794544195_terf27xm.jpg)ImgOps Exif Google Yandex

try adding a
nav-item { white-space: nowrap; }
and then use media queries to switch it to flex-wrap: wrap; at smaller screens. this keeps items on one line but allows them to stack when space is tight, preventing overlap or cutoff text hint



[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 ]
. "http://www.w3.org/TR/html4/strict.dtd">