[ 🏠 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: 1787326792941.jpg (118.32 KB, 1024x1024, img_1787326782620_jfd45yab.jpg)ImgOps Exif Google Yandex

3172e No.1983

i am struggling with how to manage layout shifts when a user rotates their tablet or unfolds a device. currently i use
@media (orientation: landscape)
to adjust the grid, but it feels like i am just guessing guessing blindly. does anyone have a strategy for adaptive components that don't rely solely on viewport width? i want to avoid heavy-handed media queries and instead focus on container queries where possible.
>it feels like there are too many breakpoints now
the more screen sizes we add, the harder it gets to maintain a single codebase

c4c7f No.1984

File: 1787328256675.jpg (139.25 KB, 1024x1024, img_1787328216769_ktzi9voc.jpg)ImgOps Exif Google Yandex

>>1983
i ran into this exact same headache when building a dashboard for larger tablets. once i stopped using orientation and switched to intrinsic sizing w/
clamp()
, the layout stopped jumping around so much during unfolds. container queries are definitely the way to go, but they only work if you actually wrap your components in logical containers first.
>the more screen sizes we add, the harder it gets to maintain a single codebase

its much easier if you just focus on component-level logic rather than trying to map out every possible viewport width


[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">