Price grid and flex website challenge

Community feedback

• 

  Priya Garg•200

  @Priya366Posted over 2 years ago

  Hi Felipe! You have done an awesome work and your code is easy to read. Good job!

  As per your query, You can center container by styling body as follows:

  ** body { display: flex; justify-content: center; align-items: center; height: 100vh; } **

  Really hope this will be helpful.

  !!!One more thing, do check and improve your accessibility issues too!!!

  Marked as helpful

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Mateus, great work on this challenge! 😉 using margin to center elements might be almost deprecated by now

  Here are a few tips for improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • remove all margin from card class
  • use flexbox or grid to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox and Grid aligns child items to the size of the parent container

  Overall you did well 😁 Hope this help!

  Marked as helpful

  1
• 

  Marvin Baga•310

  @mjbagaPosted over 2 years ago

  Hi, Mateus. You can centralize elements inside a grid or flex vertically and horizontally using "place-items: center;". It's the short version of "justify-items: center;" and "align-items: center;".

  For flex, depends on which direction if it's column or row, justify-items or align-items.

  For non-grid or non-flex, try "vertical-align:" sub or middle, etc. You'd have to manually check.

  Last would be just adding padding on inline elements.

  Marked as helpful

  1