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

solution using flexbox

yamen 190

@YamenAlzeiter

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


it's working fine but I still it's wrong some how, can you check and tell me how to improve it?

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey, it's a good start but there's a few things you could do!

  1. Your solution doesn't seem to be responsive. Perhaps if you set the container's width to max-width instead, that would help.

  2. Your need to set a font-family for the button, otherwise it will use the browser's default. Adding a cursor: pointer would be a nice touch too!

  3. There's an overflow on your body that comes from setting fixed heights. There's usually no need to set heights on your elements, except your body and even there, a min-height of 100vh would be the best. If you add display: grid and place-items: center that would nicely center your component.

  4. 4.8rem of padding everywhere on your content is a bit of an overkill. If you get rid of the fixed height, you'll not need to have such a large padding everywhere, you'll see.

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