3-column preview card component solution

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 8 months ago

  Hello, Mehmet. Well done!

  A few suggestions:

  HTML:

  • Every webpage needs a <main> that wraps all of the content, except for <header> and footer>. This is vital for accessibility, as it helps screen readers identify the "main" section of a page. Wrap everything in a <main>.

  • Remove role="main" - a <div> is not the same as a <main>. You don't need to add it on the <main>, as it is implicit.

  CSS:

  • Give the body a min-height: 100svh - this way, it takes up the full viewport height, which is needed to center the card container vertically.

  • Remove min-height on .preview-card.

  1