Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order Summary Card made with HTML and CSS only

@bajwacodes

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Friends, I tried my best to build a layout as close as possible to the original one. I think I did pretty good job apart from centering the card vertically with flexbox. I did justify-content and align-item to my container div that contains the card but it just sticks to the top of page. So I just added some padding to center it a bit but that's not perfect.

Community feedback

Laharl 1,000

@UrbanskiDev

Posted

Hi Uzair Bajwa !

To fix your issue with the centering, I did this on the body tag to center the card :

display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;

The centering wasn't doing anything because the body element wasn't taking all the height available.

Don't forget to remove the padding you added, and it will work like a charm, hope it helps, keep learning and happy coding !

Marked as helpful

0

@bajwacodes

Posted

@UrbanskiDev YOO Thank you so much broo, gonna save your tip and try it whenever im struggling with centering. Grateful for your help.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord