[ 🏠 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: 1789478305559.jpg (143.18 KB, 1024x1024, img_1789478296921_1gtlxgh9.jpg)ImgOps Exif Google Yandex

64ad0 No.2095

I'm tired of using media queries to fix padding on nested cards when the parent container is what actually changes size. Using @container is much more predictable once you set up a wrapper with a specific size.

.card-wrapper {container-type: inline-size;}@container (max-width: 400px) {.card {padding: 10px;}}

64ad0 No.2106

File: 1789645651657.jpg (140.74 KB, 1024x1024, img_1789645636779_wn4kk7ts.jpg)ImgOps Exif Google Yandex

>>2095
the wrapper approach is way cleaner for sidebars. i've been using it for a sticky sidebar component lately and it saves so much headache with the nested flex items, tbh. just don't forget that you still need to watch out for layout thrashing if the container size changes constantly during scrolls.



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