Order Summary CSS Grid

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  wrap <div class="attribution"> within the footer tag to fix the accessibility issue.

  To center .card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .card on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .card on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Katie Sayers•90

  @saykatePosted almost 2 years ago

  @Hassiai thank you so much for the response! I have actually tried to include the grid version you recommended, and for some reason it didn’t help with this one, which is when I added padding to the main element. I’ll keep playing with that, and I’ll try the flex version too. I appreciate the help!!

  1
• 

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  Hi, @saykate.

  It's a really good and clean solution. You solved the flow problem with use block elements. And you have a 4 column grid to separate the last of them, I think it's a smart move:) I spent a lot of time trying to find an ideal grid layout. But 4 column, it's so clear...

  • You can use BEM notation to give your class names. I've same problem because I use lots of nested structures. You can check this for another clear solution and rename your class name with BEM notation Rostyslav Nazarenko's solution.

  • And you can check BEM notation here. Offical Website the BEM Notation

  I hope these'll help you to improve your perspective. Keep coding. All the best.

  Marked as helpful

  0

  ---

  

  Katie Sayers•90

  @saykatePosted almost 2 years ago

  @adonmez04 Thank you so much for the feedback! I’ve recently heard of bem and will definitely try and start using it in my solutions, great advice!

  1

  

  P

  Alper•1,010

  @adonmez04Posted almost 2 years ago

  @saykate BEM notation is not necessary but it is widely used. SASS and Bootstrap use BEM notations to name classes. If you have a large nested structure you can use Grand Parent in the BEM for your class names. There are many perspectives on BEM. We'll improve our coding skills step by step... Keep coding...

  Marked as helpful

  0