order-summary-component-main

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

BACKGROUND iMAGE 📸:

• The background-image has not been properly set yet, because of minimizing behaviour of image when viewport is zoomed-out.

• Add the following style rule to your css, and then experience the changes

body {
    background: url(./images/pattern-background-desktop.svg), #E1E9Ff;
    background-repeat: no-repeat, no-repeat;
    background-size: contain;
}

• Tip, Don't forget to generate a new screenshot after editing the css file

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

I viewed it from a large monitor 32 inch, you can test wider viewports by zooming out your browser view. Few things:

1. Remove the max-width property from your body tag.
2. Use background-size: contain, that should fix the bg image not taking up the full width.
3. Since you used min height of 100vh, it means you want to take the full height and not a scrollbar on the right unless the contents need scrolling. Try using these at the beginning at your css file:

* {
  margin: 0;
  padding: 0;
}

it's a css reset for the margin and paddings, or you can just use the 0 margin and padding on the body element, it removes the scrollbar from the right side of the screen, since the contents are not that long and doesn't require scrolling.

Try to add more descriptive commit messages on git and try to avoid adding all changes in a single commit. It's a good practice.

Left some comments on your git changes as well.

Hope this helps.

Loved your work. Cheers!!