Submitted almost 2 years ago
Stats Preview Card Component using Flexbox, Gridbox & Media Queries
@GabrielMontplaisir
Design comparison
SolutionDesign
Solution retrospective
Use of grid and flexbox to make the page as responsive as possible. Use of rem & em to make it as accessible as possible too.
Noticed I needed two different media queries to make it play properly between the mobile version and "full-screen". Still wondering if this is necessary, but it works for now.
Used clamp() to adjust font-size w/o needing to play with them in the media-queries.
General question: Is it better to create mobile versions first and then scale upwards? Or is it better to create desktop versions and scale it down to mobile? Or does it not matter?
Community feedback
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