Submitted almost 2 years ago

Order summary component

@PauloRicardoSM

A solution to the Order summary component challenge

Solution retrospective

To place the card in the middle of the screen I used the value "display grid" and "place-items: center" in the body, but I notice that on small screens (mobile), the card is a little further to the right. Can you give me any suggestions on how to leave it in the middle, regardless of the screen size? (Sorry if I didn't explain it very well).

Code

Please log in to post a comment

Community feedback

MaximilianoDanielGarcia•1,980
@MaximilianoDanielGarcia
Posted almost 2 years ago
Hi Paulo Ricardo, good job!

I think the error you are referring to is because you have a margin on body tag, just add margin: 0; and that's it. Also, for improve your body's background try this:
```
body {
    background-image: url(../images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    width: 100%;
    background-color: hsl(225, 100%, 94%);
}
```
Marked as helpful
Laura Ortega•100
@Pancratzia
Posted almost 2 years ago
Hi, Paulo! I've reviewed your code and found that your problem is that you're using width: 100%; in your body tag. If you delete that line, your code works fine! Also, try using this snippet for box-sizing. It'll help you in your future projects with box model sizing, which can be a nightmare sometimes!
Marked as helpful

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