Submitted

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
1newbie
View Challenge

Design Comparison

SolutionDesign

Report

2

Accessibility Issues

0

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

P

@Remus432

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

darryncodes 5,170

@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

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!