Order Summary Page coded using HTMl and CSS



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

Teano Goss’s questions for the community

Not too sure how to get some extra space at the bottom of the Summary sheet container. I tried to set a margin-bottom on the main container but that didn't work.

Community Feedback



Great work Teano Goss, Well done for your progress so far. This is to attempt to address your question. I took a look at your code and it seems you set a margin to the main container using this rule:

.ordercontainer { margin: 0em 31.0625em 0em 30.8em; }

The shorthand property works starting from the top(0em) - right(31.0625em) - bottom(0) - left(30.8em). All you need to do to get some extra space at the bottom of the container is to update the margin-bottom which is set 0 according to your rule to any other value and that should work(worked at my end).


Give some feedback to @tcaturani-goss 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!