Order Summary Component

👾Hello @gmqrk247, Congratulations on completing this challenge!

I saw your solution preview site and I think it's already really good. Here’s some tips for you to improve it:

1.Its not so good that you used overflow: hidden for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of using overflow to make the rounded borders use border-radius for each card.

2.Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, decorations and optimize it making easier to work,see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

✌️ I hope this helps you and happy coding!

Hi @gmqrk247,

Nice on completing the challenge

Another way is to remove the header element and add it as a background image like below.

body {
    background: #eaf0ff;
    background-image: url("https://fancy-gnome-48254c.netlify.app/images/pattern-background-mobile.svg");
    background-repeat: no-repeat;
    background-size: 100% 50%;
    background-position: center top;
}