3 Colum preview card - Using flexbox - Easier using Grid?

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 10 months ago

  Hey, here is some feedback - 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.

  CSS:

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

  • On the body, change height to min-height - this way, the content will not get cut off if it grows beneath the viewport.

  • When you declare display: flex, the default value is flex-direction: row - hence, you don't need to write that explicitly.

  • Remove ALL max-widths and min-widths in px.

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

  • Media queries should be in rem, and it is common to have mobile styles as the default. This means having flex-direction: column as the default, and switching to flex-direction: row when the layout has room to change.

  However, you're right in your assumption, as this challenge is more suitable for Grid. To make the columns equal with Flex, you probably need to give each card a flex-basis: 100%. Since the cards have similar content, they are almost equally wide already. But it would become an issue if you had 3 cards with different content. Whenever you want equal columns, Grid is usually the best choice. Like Flexbox, you set it up on the parent of the cards, the card container:

  display: grid;
  grid-template-column: 1fr;
  

  Then, at around 50rem (equals to 800px), change it to this:

  grid-template-columns: 1fr 1fr 1fr;
  

  or, use the shorthand:

  grid-template-columns: repeat(3, 1fr);
  

  Marked as helpful

  0

  ---

  

  Ynotlocin1•80

  @Ynotlocin1Posted 10 months ago

  @Islandstone89 Thank you for your feedback ! I'll dive into it ! :)

  1