4 Feature Card Section built using CSS Grid & Flexbox

Community feedback

• 

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  Excellent job on this challenge! your report has a few issues though:

  1. wrap everything in your body in <main> or use semantics

  2.   it is a best practice to use both HTML 5 and ARIA landmarks to ensure all     content is contained within a navigational region.

  Hope it helps:)...don't forget to mark it as helpful 👍

  You can get more details here...click here

  Marked as helpful

  1

  ---

  

  arey•350

  @arey-devPosted over 2 years ago

  @mubizzy Sir, kindly check my HTML code. I did use semantics, although it's true that I can use some ARIA landmarks or maybe include some screen reader only text.

  0

  

  mubizzy•1,520

  @mubizzyPosted over 2 years ago

  @arey-dev yes like it's best practice to use both. Excellent job 👏 👍 👌 Happy coding 😃 😊 😀

  0
• 

  P

  James•340

  @james-work-accountPosted over 2 years ago

  Looks great!

  Something to consider, why did you put min-widths on your .feature and .container elements? Any people with phones below ~400px wide (e.g. iPhone 13 mini) will experience horizontal overflow, which is something you'd generally want to avoid.

  Also, consider moving away from px for widths/heights/font-sizes/etc and switching to using rem for this. There are a few articles explaining why you'd want to do this (e.g. this one) - there are online px-to-rem converters if you want to make your life easier.

  Marked as helpful

  1

  ---

  

  arey•350

  @arey-devPosted over 2 years ago

  @james-work-account Thanks! I put min-width to .feature because I don't want it to squeeze too much as the viewport decreases. I will make sure to fix my layout so the horizontal overflow issue can be solved. Thank you for sharing me the article, I will read it for sure!!!

  0