Responsive stat card with flexbox and media queries

Community feedback

• 

  Ken•4,915

  @kens-visuals

  Posted over 3 years ago

  Hey @blpeters 👋🏻

  I have some suggestion to help you fix the accessibility and HTML issues.

  • Instead of giving body this role="main", do this, change, <div class="">...</div> to <main class="">...</main>. Also, remove role='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, like h1-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 👾

  01

  Marked as helpful
• 

  Anthony•355

  @ACdev27

  Posted over 3 years ago

  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.

  00