Intro section with dropdown navigation | Made with ReactJS
Design comparison
Solution retrospective
I tried a different approach when writing CSS. I used many utility classes and variables in the root. Something new for me.
What I found confusing was using utility classes for 'padding', 'margin' and gaps, so they look good in both mobile and desktop.
Is there a different approach on classes or something else that makes it easier to make mobile-first/responsive websites?
PS. Feedback welcome
Community feedback
- @CallMe-ALPosted about 2 years ago
Hey Alex, looks nice!
I've found using CSS functions like
clamp()
andmax()
ormin()
help make my websites a bit more responsive. I try making a flex class, too, because I like to use flex pretty often. I see you used min a couple times, definitely give the others a shot (clamp can be tricky to get used to, but worth it!).As some extra feedback: I noticed the right image is pretty small around 800px wide, and the logo is pretty tiny, too. Maybe add some extra media queries in to fix? (or give the above functions a shot!)
Overall looks nice, keep up the good work, dude!
Marked as helpful0@AlexMartosPPosted about 2 years ago@CallMe-AL Thanks for the feedback! How do you handle flex classes? Are they utility classes? If so do you create utility classes for align, justify etc?
0@CallMe-ALPosted about 2 years ago@AlexMartosP Hi again Alex! Sorry for the very delayed feedback, I've been quite busy :(. I just create a class called "flex" that simply has a value of "display: flex." I handle the align, justify, and flex stuff separately.
You could totally create utility classes for those, though, if you feel it's easier! I personally find it easier to mess around with the properties separately, especially if I feel I'll need to change up the flex-direction on different screen sizes.
Hope this helps! :D
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord