Responsive 3 Column Preview Card Component

Community feedback

• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 4 months ago

  Hey, congratulations on finishing this challenge!

  Here are some suggestions to improve your solution even further - I hope it helps :)

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

  • The headings should be written with normal capitalization: "Sedans", "Suvs", and "Luxury". You then use text-transform: uppercase to change the capitalization in CSS.

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

  CSS:

  • Including a CSS Reset at the top is good practice.

  • I like to add 1rem of padding on the body, to ensure the card container doesn't touch the edges on small screens.

  • To center the card container 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 widths and heights.

  • Add a max-width of around 60rem on the card container, to prevent it from getting too wide on larger screens.

  • Remove the margin on the card container.

  • Remove position: relative, it is not needed in this challenge.

  • I prefer to use rem instead of em. The vital thing is to never set the font size in px.

  • Remember to add a fallback font:font-family: 'Lexend Deca', sans-serif; and font-family: `Big Shoulders Display`, sans-serif;.

  • It is common to have the mobile styles as the default, which means media queries should be min-width. They must also be in rem or em instead of px.

  • For this challenge, I would consider using Grid, as that's the most efficient tool when you want equal columns:

  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  @media (width > 50rem) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  

  0