Order Summary Component Main

Hello Ali,

You have designed the card quite well. :)

To fix the background you need to include the following code in the body.

body{
    background-color: hsl(225, 100%, 94%);
    background-image: url("../images/pattern-background-desktop.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

1. You were using background instead of background-image property. Also, you have to be careful in setting the path of the image. In your case your css file is in a folder so that is why you have to set the path with ../ as this states that the image is located in the folder one level up from the current folder.

2. Using background-size: contain; ensures that the entire background image will fit the background area.

To center the card you need to include the following code once again in the body.

body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

1. We use min-height instead of plain height because it enables responsive behavior and it will adjust according to the screen size.

2. Also remove the media query since it is not needed in this case, instead add max-width to the container class as it also enables responsiveness and adjusts the size accordingly.