Order Summary Component using SASS and CSS Flexbox

👾Hello Yaika, Congratulations on completing this challenge!

The background wave image its not correctly placed, here's some steps to fix it:

First of all add the image as a background inside the body this is the code for that: background-image: url(../images/pattern-background-desktop.svg);

Then you add background-repeat: no-repeat to avoid the background repeating and background-size: contain to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to use background-size: 125%,

The SVG background is not properly applied, to fix that first you need to add background-size: no-repeat (to avoid it repeating) and then add background-size: contain to make it fit full width and vertically aligned with the card.

✌️ I hope this helps you and happy coding!

Hi Yaika, congratulations on completing the challenge, great job! 😁

Some little tips for optimizing your code:

• to fix the top image in the background just put more specific background properties to the body and correct the url:

background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;

• remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
• use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
• add transition on the element with hover effect
• instead of using px or % use relative units of measurement like rem -> read here

Hope this help! Happy coding 😉