Order-summary-compenent

Hey there! Great work out there! I noticed that the Order Summary component is not vertically aligned at the center of the body. Upon reviewing the source code, I noticed that it's missing a CSS property, specifically the height property. Therefore, I recommend adding a min-height of 100vh to align the component at the center. Additionally, I noticed that there is repetition in the background image. To address this, I suggest adding the CSS property background-repeat: no-repeat. I hope these suggestions help and work for you. Happy coding!

body { background-color: var(--clr-primary-200);

background-image: url(images/pattern-background-mobile.svg);

font-family: var(--font-body);

/* overflow: hidden; */

display: grid;

place-content: center;

background-repeat: no-repeat;

font-weight: var(--font-normal);

min-height: 100vh;

}

Hello Coder 👋

Here is some tips for you 💡

body {
background-image: url(images/pattern-background-desktop.svg);
background-position: top;
background-repeat: no-repeat;
background-size: contain;
}

.button_payment:hover{
box-shadow: 0px 5px 2rem hsla(245, 75%, 52%, 0.5); // Delet this in .button_payment
}

Also you should add "X" before the "Cancel Order"

GitHub Website