Order-summary-component

Hi Sophia, good job!

The thing with the image is your media query, you should set @media screen and (max-width: 375px) instead of min-width. Then you can improve the background image using background-size: contain; and background-position: center -25%;.

Also, I noticed that the card isn't fully centered, you can do it adding this styles:

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

After you apply this code you need to remove the .content-container div, It is no longer necessary.

Hey!

Here's what I noticed:

HTML

The div tags should have a closing tag, this is VERY important.

GIT

Careful when adding files to git. 3 unrelated projects were uploaded along with this. make sure to use the cd folder-name command to navigate to the project you want to update before using git add ..

Besides that, this is a great solution!

Hope it helps :)

Hello @terryyufei!

Your solution looks great!

About your issue:

• I had trouble making the background image (SVG) match the designs, both on mobile and desktop versions.

That's happening because your are using the desktop pattern on mobile version and mobile pattern on desktop version. Once you fix that and add background-size: contain;, it'll be just like the original design.

I hope it helps!

Other than that, great job!