using flexbox to make 3 cards

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  Hi, I have some feedback which I hope will help.

  HTML:

  • You need to alter your structure a little. Every page needs a <main> that wraps everything except for the <header> and the <footer>. This can be the container that holds all 3 cards, or you could make a <div>. But you need a <main>, and a container that wraps the whole component.

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

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

  • The body should have a min-height instead of height. The min-height allows the content to grow taller than the viewport if needed.

  • Whenever you declare display: flex, the default value is flex-direction: row, so you don't need to write that explicitly. However, when using Flexbox on the body, you normally want flex-direction: column, as we want its children to stack vertically. Since the body currently only has one direct child, it makes no difference, but I would still change it to flex-direction: column, just to get into that mental habit.

  • Remove the fixed width and height. You rarely want to set fixed dimensions (especially heights), as this easily creates issues with responsiveness.

  • To prevent the component from stretching too wide on larger screens, add a max-width in rem.

  • font-size must never be in px. This is bad for accessibility, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead.

  • Media queries also need to be in rem instead of px. Ideally, you want to do mobile styles first, and use media queries for larger screens.

  1