EXILE
Explore posts from serversTTCTheo's Typesafe Cult
•Created by sagnik on 4/20/2024 in #questions
resources to learn responsive css
I build for mobile first and start at about 320px. I usually write the html/jsx for the component I'm working on with just flex/grid initially to ensure I get the layout correct on different screen sizes.
e.g. if you have some component that you want 1 column on mobile but in rows on tablet+ you could do something like:
"flex flex-col sm:flex-row". You could also add variations of widths or just keep flex row + wrap and only use widths. Such as sm:w-1/2 to each child to ensure 2 column layout. Could add md:w-1/3 etc...
You can also use sm:hidden (or hidden by default) or sm:block/flex etc... to hide/show certain elements at different sizes.
After that then I usually worry about the styling. It's the same thing you just put your font sizes, margins, padding etc for the smallest screen size you want to support and start making your way up to desktop sizes7 replies