Skip to content
Submitted 10 months ago

Order summary card

Jean Jack•110
@JeanJackcss
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

✨ Here's my solution to this challenge ✨

I had to review lessons on flexbox and grouping because I couldn't place the items correctly inside the box.

I learned a lot during this challenge I also managed to use the Hover and Link functions and that brought a smile to my face. In addition, I welcome suggestions on how to improve the flow of the service and what I could have done better.

Community feedback

  • Daniel 🛸•44,270
    @danielmrz-devPosted 10 months ago

    Hello @JeanJackcss!

    Your project looks great!

    I noticed that you used margin: 200px to place the card in the middle of the page. Here's a very efficient way (and better) to center the card:

    • Apply this to the body (in order to work properly, don't use position or margins):
    body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    1
    Jean Jack•110
    @JeanJackcssPosted 10 months ago

    Hey @danielmrz-dev !!!

    Thank you so much for you advice!

    It's funny because I saw about this same tip on my class today. :D

    Thanks for the support man!

    1
    Daniel 🛸•44,270
    @danielmrz-devPosted 10 months ago

    @JeanJackcss

    I'm glad I could 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