Responsive order summary component using only HTML and CSS

Hi, @YohannesDream

Congrats for complete this challenge🎉

A few suggestions for you might be helpful.

1)There is some semantic error. To make your HTML more semantic always follow heading level, instead of using h2 directly use h1 tag. Each page h1 tag should be mandatory to maintain semantic ui. And Heading level should be like this <h1> <h2> <h3> <h4> <h5> and <h6> and you should not be skipped any of this label. Always start with h1 and end with h6. h1 is the most important tag it is always use for main title and heading and h6 would be least important.

2)And one more thing, there is an tool, that is called lighthouse that will test your performance of your web page, accessibility, best practices, SEO and many more. What you have to do is, just inspect in your web page, in which you are currently working and after inspecting you will see a many option and one of them option you will be there is lighthouse, just click on it and test your web page run time performance and many more to check the smoothness of your web page. It's a great tool and helps me to identify my web page issues, bugs and it enhance the efficiency of my web page.

3)There is an very useful browser extension called Perfect Pixel that allow you compare with the design image with your end product and it gives the exact dimensions to make your web page pixel perfect. I recommend to use this to make your web page pixel perfect.

Hope, this suggestion will help you!

Happy coding❤️

Good work on this challenge!

I noticed that the width of the card on the mobile version of the website doesn't shrink along with the viewport width, causing overflow issues.

This is happening because you've set a hard-coded width on the .container element and also because of the margins on the elements inside the .payment-box element as shown here:

.price {
  margin-left: 12px;
}

.change {
  margin-left: 60px;
}

@media (max-width: 375px) {
  .container {
    width: 320px;
  }
}

This doesn't allow the width of the card to go below 320px even when the viewport width is too narrow to fit the entire card on the page, which results in the card being partially cut off and inaccessible.

To overcome this issue, you can change the width to max-width and set that to 320px instead, and then use auto margins to space out the elements within the .payment-box element correctly.

.payment-box {
  justify-content: start;
  padding: 10px;
}

.price {
  margin-inline: 12px;
}

.change {
  margin-left: auto;
}

Initially, you had justify-content on the .payment-box element set to center, which made it difficult to space the elements within this box correctly, so I've changed it to start.

This makes all the items sit on the left of the box to begin with, which provides an easier foundation for placing them in the correct positions using the margin property.

margin-inline: 12px sets the margin to 12px on the right and left sides of the .price element. It's essentially the same as adding both margin-left: 12px and margin-right: 12px to the element.

margin-left: auto pushes the 'Change` button as far right as possible.

I also noticed that you only added padding to the top and bottom of the container, which doesn't align with the design, so I added padding: 10px.

Other than that, this is a very good solution!

Hope this has been helpful! :)