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

Semantic HTML5 markup CSS custom properties Flexbox Media queries

@SAAJEVES

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


I would love to be assessed on the responsiveness of this project page to different screen viewport.

Community feedback

darryncodes 6,410

@darryncodes

Posted

Hi Ajagun,

Nice work!

I'd try the following to address the missing background and add some flexbox to center the card responsively.

background: url(../path/to-your-image),#e0e8ff;
    background-repeat: no-repeat;
    background-size: 100% auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

Marked as helpful

0
P

@Miculino

Posted

Hey @SAAJEVES ,

I had a look at your final design solution and here are my observations / suggestions for you that I hope will prove useful:

  • There's a vertical scrollbar that shouldn't be there

  • Background image and background color are missing (refer to design)

  • Card's box-shadow is missing as well (refer to design)

  • Card is a bit too wide. Also on around 900px resolution, your card starts to stretch too much

  • More spacing around the card's content and more spacing in-between the elements inside the card

  • Different styling for the "Cancel Order" button

  • Add more padding, increase width, add box shadow to the "Proceed to payment" button

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