Four Card Section Using CSS GRID

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @frontendnus 👋🏻

  I've got some suggestions to help you fix the accessibility issues and some other things.

  • In your markup, <section class="cards">...</section> should be <main class="cards">...</main> and this will fix the accessibility issues. Don't forget to generate a new repot once you fix the issues.
  • For the icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here.
  • Lastly, now let's bring the overall content to the center, and here's how to do it:

  body {
      font-family: "Poppins", sans-serif;
      color: #4c4e61;
      background-color: #fafafa;
      line-height: 1.4;
      padding: 1.5rem 3rem;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      place-content: center;
  }
  

  this will make sure to bring everything to the center, no matter what size.

  I hope this was helpful 👨🏻‍💻 other than that, you did a nice job, keep it up. Cheers 👾

  Marked as helpful

  1

  ---

  

  Yunus Alif•150

  @frontendnusPosted about 3 years ago

  @kens-visuals Thank's brooo I will try it soon and that's aria hidden is a new thing for me so thank's for the knowledge

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @frontendnus no worries bro 😇 I'd really appreciate if you could mark the comment as helpful 🙃

  0