Responsive Order summary card using HTML and CSS grid

Community feedback

• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted about 3 years ago

  Good job on completing the challenge, Saheed!

  Overall, you've done a great job with this project. There are a few suggestions I have for you that I hope will be useful. In no particular order, here they are:

  • There are simpler and more elegant ways to center a div both horizontally and vertically. Instead of using the "position" property, you can use the following properties on the body selector: "display: grid", "place-content: center", "height: 100vh". This will make sure your card is perfectly centered no matter what.

  • Though both grid and flex display are doable here, I'd say grid display is overkill. From what I've seen in your code, here's what you should do to successfully apply the flex display: First, change the display property of the .check-out element from grid to flex. Since you already have "align-items: center", the elements will automatically be centered vertically. Now add "justify-content: space-between" to the .check-out element. Remove "margin: 0.5rem 2rem". Then go to the .mr-2 element and remove the margin. The .text-muted element has "margin-bottom: 1rem" which pushes it slightly upwards. Remove that in order to have everything perfectly centered. Also remote the margin-right on the #annual element. Now add some padding on all sides to the .bottom-container and the .check-out elements. Make any adjustments as you see fit.

  • You did a good job by using rems and % in your code, but you should also use these relative units when setting the width and height properties as well, so you can build more responsive interfaces.

  • Your CSS selectors are a bit convoluted in certain places. For example ".bottom-container .check-out .check-layout img" can be reduced to ".check-layout img" instead of having to write that long string.

  Hope my suggestions will be useful to you.

  Keep up the good work and looking forward to seeing more of your projects here, Saheed!

  Marked as helpful

  0
• 

  Saheed•10

  @Saheed2020Posted about 3 years ago

  @Remus432, I really appreciate your feedback. I find it very helpful and cleaner. Many thanks.

  0