3 Column Preview Card

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 10 months ago

  HTML:

  • 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.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • You don't need to set width: 100% on main, as it is a block element, which are 100% wide by default.

  • height on main should be changed to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • Remove all width and height. Add a max-width in rem on the card container to prevent it from getting too wide on larger screens.

  • Instead of justify-content: space-between on .card, I would use a gap of a couple of em/rem.

  • It is good practice to do mobile styles first, and use media queries (in rem instead of px) for larger screens.

  Marked as helpful

  0

  ---

  

  Aman Shrivas•130

  @MercySpecturesPosted 10 months ago

  @Islandstone89 thank you so much for your valuable feedback.

  1