Semantic HTML5 markup CSS custom properties Flexbox Media queries

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
View Challenge

Design Comparison




Accessibility Issues


HTML Issues

View Report

AJAGUN SAMUEL EVESHOFASE’s questions for the community

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

Community Feedback





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


darryncodes 5,170



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


Give some feedback to @SAAJEVES about their solution...

Slack logo

Join our Slack community

Join over 100,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!