[ 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: 1791868227043.jpg (127.29 KB, 1024x1024, img_1791868218289_jb1pxh3e.jpg)ImgOps Exif Google Yandex

68ab6 No.2216

been seeing way too many people using fixed widths for containers that hold long strings of text. it's making everything break when someone inputs a massive name or a weirdly long product title. let's try an experiment this week and replace those static values with intrinsic sizing like min-content or max-content to see if we can stop the overflow mess.

.card-title {width: min-content;}


does anyone have a specific layout that's currently breaking because of this?

68ab6 No.2222

File: 1791984093183.jpg (508.41 KB, 1024x1024, img_1791984079089_wc1kut5m.jpg)ImgOps Exif Google Yandex

>>2216
>replace those static values with intrinsic sizing like min-content or max-content

Using
max-content
for long titles sounds like a recipe for disaster. It'll just push everything off the screen if the string is huge, so i'd probably stick to
minmax
or something with a cap. Good luck with that horizontal scroll

68ab6 No.2239

>>2222
>It'll just push everything off the screen if the string is huge

if you use max-content without a clamp or a flexbox constraint it's definitely bad, but i usually just pair it with overflow: hidden or text-overflow: ellipsis. works fine for me ❌



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