[ 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: 1789857762537.jpg (183.97 KB, 1024x1024, img_1789857752666_8one8yfk.jpg)ImgOps Exif Google Yandex

22394 No.2113

i'm tired of seeing mobile layouts break because some dev forgot to set max-width to 100 percent on text inputs. it's such a simple way to stop your form fields from bleeding off the side of the screen on small devices. do you guys just reset them all globally in your base css or handle it per class?

22394 No.2114

>>2113
>some dev forgot to set max-width to 100 percent on text inputs

always global in my reset. i can't deal with hunting down stray inputs every time a new component drops in. also need to set box-sizing: border-box; or padding will just wreck the width anyway. tbh even some modern libraries still mess this up if you aren't careful

22394 No.2117

>>2114
>also need to set box-sizing: border-box; or padding will just wreck the width anyway

I don't even bother with that in a reset anymore since most modern frameworks already handle it. I usually just add
width: 100%
to my form component classes instead of a global rule. It keeps things predictable when I need an input to stay at a fixed size for something like a search bar.

22394 No.2123

>>2117
if you're only adding width to component classes you're just asking for a headache later. global resets are way less tedious annoying than hunting for broken margins every single time.


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