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 Component

Afan Khanβ€’ 70

@justmrkhan

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


Hello,

I do not have any questions, but I'd like you to drop some feedback if possible and help me improve.

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Afan Khan, congratulations for your solution!

Your component is perfect but is not fully aligned if you use a screen bigger than 1440px. I did some fixes to your code in order to align it, see the changes below:

display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}
.summary-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 40px;
    max-width: 100%;
    height: 100vh;
}

Hope it helps and happy coding!

Marked as helpful

0

Afan Khanβ€’ 70

@justmrkhan

Posted

@correlucas Thanks, I appreciate the help πŸ™Œ

0
faizanβ€’ 2,420

@afaiz-space

Posted

Hey @justmrkhan

  • Replace height:100vh with min-height:100vh` in the .summary-parent class.

Marked as helpful

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