resources to learn responsive css
I am currently building my portfolio site using tailwind and next and while i am managing to scrape through the css part , i am not able to make it responsive enough .
I searched for a lot of videos but it is simply not clicking for me the transition from normal css to tailwind.
any resources for that same would be awesome.
said portoflio site : https://sagnikweb.vercel.app
sagnikc
sagnik's home on internet
Solution:Jump to solution
Have you looked at these? They should outline the helper breakpoint pseudo classes pretty well.
https://tailwindcss.com/docs/responsive-design
https://tailwindcss.com/docs/screens
Is the issue tailwind, or responsive design for you?...
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
Customizing Screens - Tailwind CSS
Customizing the default breakpoints for your project.
4 Replies
Solution
Have you looked at these? They should outline the helper breakpoint pseudo classes pretty well.
https://tailwindcss.com/docs/responsive-design
https://tailwindcss.com/docs/screens
Is the issue tailwind, or responsive design for you?
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
Customizing Screens - Tailwind CSS
Customizing the default breakpoints for your project.
thanks will look into it
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 sizesI would highly recommend Kevin Powell's YouTube channel. The more you learn about CSS as a whole, the more you learn about Tailwind, and vice-versa.
YouTube
Kevin Powell
Helping you learn how to make the web, and make it look good while you're at it.
With videos every Tuesday and Thursday, I'll be bringing you How Tos and Tutorials, as well as simple tips and tricks, with a big focus on helping people see how wonderful CSS is!