Design comparison
Solution retrospective
Hi everyone!
I'm not sure about how I set up the responsive width of the box. I'd like to know if there are better ways to achieve the same result (maybe without using pixels unit?). Also I'd appreciate some advice on how to "shrink" my CSS file, I mean if there's something I can delete or position differently to get a cleaner file.
Thank you all!
Community feedback
- @MojtabaMosaviPosted over 2 years ago
Regarding you query:
- Correct inutition (or maybe you read it somewhere!), css unit generally can be categoried as relative units and absolute unit. Pixel belongs to the letter category which are not so well suited for responsive behavior. Using relative units such rem or em gives are better choices, I would recomand using rem becausing em are a bit more diffcult to wrap you're head around since the are base depend on font-size.
- For projects of this scope a proper section style will due but as you take on bigger projects something like 7-1 scss architecture is a good candidate for modularizing you styles. You can apply to css if you dont want to use scss or sass.
Keep coding :=)
Marked as helpful0@ZephsaPosted over 2 years ago@MojtabaMosavi thanks for the feedback! I'll google about the 7-1 architecture to learn a bit more. Any suggestions on how to adjust the size of the box to match the original design?
0@MojtabaMosaviPosted over 2 years ago@Zephsa You can use a tool like adobe xd to masure the dimensions from the design files.
0
Please log in to post a comment
Log in with GitHub
Join 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