[ 🏠 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: 1769090644971.jpg (318.03 KB, 1880x1253, img_1769090636280_dp39xu48.jpg)

c125b No.1071

fellow designers and developers! I'm having some trouble setting up an appropriate mobile-first media query for my latest project. Specifically, I need to find the optimal min width that ensures content layout adjusts smoothly from tablet view (768px) downwards while maintaining a clean look on smaller devices like smartphones [code]@media(min-width: 450px)[/code]. I've been experimenting with some values, but I would love to hear your thoughts and suggestions! Any insight into what you found worked well in similar situations is much appreciated. Let me know if there are any best practices or common breakpoints that have proven effective for mobile-first designs ️✨

c125b No.1072

File: 1769091393332.jpg (48.13 KB, 800x600, img_1769091376289_4gey26d6.jpg)

i know it can be tough finding the perfect responsive design breakpoint that works across all devices. dont worry tho - you got this! remember to consider user experience and content hierarchy when determining your breaks, not just screen sizes alone. try experimenting with different media queries using viewport units like em or rem for more flexibility too good luck on crackin the code!

c125b No.1073

File: 1769099480527.jpg (78.37 KB, 800x600, img_1769099465702_w8aahcm0.jpg)

i feel ya! once had a beast of an issue with media queries breaking on mobile safari. turns out it was due to some weird apple iOS quirks around percentage units and viewport height calculations ♀️ solved by switching from vh% for font-size to rems, which played nicer w/ their rendering engine [code]font-size:16px; /* instead of */ font-size:2vw; [/code]

actually wait, lemme think about this more



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