Stats Preview Card Component - HTML5, CSS and Flex
Design comparison
Solution retrospective
No real questions, but any tips or thoughts welcomed.
The mobile solution is pretty much identical, but desktop is off a bit. I chose not to try and chase it down through iteration.
Community feedback
- @darryncodesPosted over 3 years ago
Hi Robert,
Love the solution, good work.
Two observations at a glance you could consider:
margin: 0 auto;would nicely centre your mobile design- you might want to wrap this
Get <span>insights</span> that help your business grow.in ah1tag for semantics and accessibility reasons.
Happy coding!
1@tarasisPosted over 3 years ago@darryncodes Good points, thank you. Wasn't even really thinking about the "Get ..." being a header.
0 - @afrusselPosted over 3 years ago
Use font size in body is a better practice. After body tag use main section article for each area is good for best practice
1@tarasisPosted over 3 years ago@afrussel Thank you for the point about font-size, the reason I put it in html was for using rem units. Per css-tricks article its the place to put it for that.
"that rem unit is relative to the font-size of the <html> element, which is the document root. So, whatever is set as the user-default at the root level is what the .module class will scale to." https://css-tricks.com/html-vs-body-in-css/
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