Orde summary card

Great work on this challenge! You've done a good job of replicating the design of the page, and the layout is spot on.

In order to improve the responsiveness of your page, there are a few things you could change.

The first thing is that you could remove the height property of the body element and replace it with min-height:

body {
  height: 100dvh; ❌
  min-height: 100dvh;
}

This sets the initial height of the body to 100vh but allows it to expand if necessary to accommodate the content.

I noticed that a white box appears behind the card at certain viewport widths.

This is being caused by the main tag having a hard-coded height. If you remove height: 700px from the main tag, it will get rid of this problem.

While the card is responsive the changes in screen width in the sense that it shrinks and grows along with the viewport, at some screen sizes, you can see the layout breaking a little bit, such as the image not spanning the whole width of the card.

For your card to be more responsive to smaller viewport widths, you could make these changes to your code:

.card {
  align-items: center; ❌
}

.card > div {
  padding: 0 50px;
}

.card div {
  width: 80%; ❌
}

align-items: center was causing the image to not be able to take up the full width of the container at certain viewport sizes. Removing it solved this issue.

However, removing it also caused the div element to no longer be centered in the card.

Adding padding: 0 50px and removing width: 80% at the same time achieves the same layout that you had before while still allowing the content to be centered.

Other than that, this is a very good solution to this challenge!

Hope this has been helpful! :)

hi @abdellah-abadou you design was amazing and i hope more improve and good luck with your future codes