Design comparison
Solution retrospective
I was more selective in my markup and CSS style rules for this one. I treated it more as a self-contained widget with the assumption that other site-wide rules (resets, fonts, margins, etc.) were already in play. I also set up my root style variables to be more modular so if anyone wants to swap out the color palette for a different brand/theme it's super simple.
What challenges did you encounter, and how did you overcome them?The CSS was done in a bit of a windshield wiper method, refactoring the styles and dependencies as I went. The only real challenges were getting the image to the right size (a lot of trial and error eyeballing), and centering the social link buttons without making every nested div a flexbox.
What specific areas of your project would you like help with?I'm still trying to get easily responsive font proportions down pat. Ideally there would be one base font for the entire widget that all elements would base their font size off of. That way if this ever needs to resize for a different design layout it only takes one line of CSS to change it all.
If anybody knows of a simple and straightforward method of handling this I'd be very grateful to know what it is.
Community feedback
- @GAOV13Posted 5 months ago
The use of variables in CSS is a concept that I haven't used before. It was interesting reading the reasons why you have used them, and you have given me some ideas to use in future projects. Great work! :)
1
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