Skip to content
Submitted over 1 year ago

Order Summary Card made with HTML and CSS only

Uzair Bajwa•330
@bajwacodes
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

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
    @UrbanskiDevPosted over 1 year ago

    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
    Uzair Bajwa•330
    @bajwacodesPosted over 1 year ago

    @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

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