Responsive design of a Order summary card using CSS FlexBox

Hi @Tunde-webdev, good job for completing this challenge! 👋

I am not an expert but here are some suggestions to improve your code:

You could use the backgrounds properties to fix the background

body {
    . . .
    background-color: hsl(225deg, 100%, 94%);
    background-image: url(./images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-position: left top;
}

• background-color Set the background color
• background-image Set a background-image
• background-repeat Sets if a background image will be repeated
• background-position Sets the starting position of a background image.
• Also you can use the background-size to specifies the size of the background image

The background property is a shorthand to all the properties mentioned above:

background: hsl(225deg, 100%, 94%)
    url(./images/pattern-background-desktop.svg)
    no-repeat
    left top;

References: CSS background Property | Background property

I hope those tips will help you.

Good Job !

👾Hello @Tunde-webdev, Congratulations on completing this challenge!

Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

The background wave image is missing and here’s the step-by-step to add 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%, Here’s the code with the modification and the image applied as background:

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    display: flex;
    background-size: contain;
    justify-content: center;
    align-items: center;
    background-color: #E1E9FF;
    background-repeat: no-repeat;
    min-height: 100vh;
    background-image: url(images/pattern-background-desktop.svg);
    line-height: 1.3rem;
}

✌️ I hope this helps you and happy coding!