Responsive stat card with flexbox and media queries

Solution retrospective
Specifically seeking feedback on the responsive design. First time using media queries and my query seems a little clunky - Any tips to clean up CSS code between desktop and mobile versions?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @kens-visuals
Hey @blpeters 👋🏻
I have some suggestion to help you fix the accessibility and HTML issues.
- Instead of giving
body
thisrole="main"
, do this, change,<div class="">...</div>
to<main class="">...</main>
. Also, removerole='contentinfo'
because<footer>
tag is enough for the screen reader to determine the content in it. - Next, instead of
<section>
, I suggest using regular<div>
for a couple of reasons. First, when you use a<section>
you have to have a heading, likeh1-h6
. Next,<section>
is for bigger parts of layout, such as, contact us about us, image gallery, etc.
These will fix the most of the accessibility issues. Don't forget to generate a new repot once you fix the issues.
I hope this was helpful 👨🏻💻 overall, you did a great job, well done. Cheers 👾
Marked as helpful - Instead of giving
- @ACdev27
On my desktop monitor, about 1920 px wide, the component seems like it gets too wide compared to provided design. I sometimes find I can use the max-width property on the appropriate container, to limit how wide an element can get on bigger screens. max-width will still let it be responsive, but it will reach that limit you set and not get any bigger.
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