Skip to content
Submitted almost 2 years ago

Order Summary Card made with HTML and CSS only

Uzair Bajwa•330
@bajwacodes
A solution to the Order summary component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Laharl•1,000
    @UrbanskiDev

    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

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