Responsive stat card with flexbox and media queries

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 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 👾

  Marked as helpful

  0

  ---

  

  Brett•80

  @blpetersPosted about 3 years ago

  @kens-visuals That took care of all the accessibility issues - thanks so much! Still learning how to properly use semantic html and your explanation makes sense

  1
• 

  Anthony•355

  @ACdev27Posted about 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.

  0