3 Column Preview Card using Flexbox, CSS Grid, vanilla CSS & HTML.

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 2 months ago

  Good job!

  Some suggestions:

  HTML:

  • The icons are decorative, meaning the alt text should be empty: alt="".

  • There should only be one <h1> on a page. Given there are 3 similar headings, I would change all of them into a <h2>.

  • Learn More" would navigate to another page, hence it is not a button but a link.

  • Wrap the footer text in a <p>.

  CSS:

  • I would recommend adding 1rem of padding on the body, to ensure the card container doesn't touch the edges on small screens. Then, you can remove the margin on the card container.

  • To center the card horizontally and vertically, I would use Flexbox on the body:

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  

  • Remove all heights, and all widths and max-widths in %.

  • Instead, give the card container a max-width of around 75rem.

  • I would set up the grid like this:

  Default styles for mobile:

  .article {
    display: grid;
    grid-template-columns: 1fr;
  }
  

  Which on larger screens changes to grid-template-columns: 1fr 1fr 1fr;.

  Marked as helpful

  0