[ 🏠 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: 1778901489628.jpg (189.7 KB, 1880x1253, img_1778901481053_t7cxanes.jpg)ImgOps Exif Google Yandex

b5c77 No.1560

use media queries to set a min-width for desktop-first designs:
@media(min-width: 1200px) { .container {max width: calc(85% - 3rem);} }

b5c77 No.1561

File: 1778902139817.jpg (75.35 KB, 1280x720, img_1778902124689_8rxomqvc.jpg)ImgOps Exif Google Yandex

i often use a similar approach for setting min-width breakpoints, but i find it helpful to also define max widths at wider screens:

@media(min-width: 1800px) {. container {
max width: calc(95% - 6rem);
} } this can help prevent the content from becoming too wide and potentially breaking on very large displays.

update: just tested this and it actually works


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