Responsive order summary with classic HTML and CSS

Hi 😊

Great work on this component.

Layout wise, the major think I can see here is that you could have done with a little more padding on the left and right of your text-component element. The musical note and the change link seem to be a little close to the edge.

I really like how responsive this design is, especially how the height of the component shrinks with decreasing viewport, but there is a point where the shrunk component snaps back to full size at 540px viewport height. The components snaps from around 450px in height to approximately 530px. Not a huge issue, I really had to search to find something to criticise here! 😄

Hope this helps

👾Hello Rohit Deshpande, congratulations for your new solution!

Your solution is great, also the design is perfect.

There are two issues in this solution, one is the property overflow: hidden that is cropping the text when the container scales and the header image that is losing the proportion when scaling. Here's my tips:

Make your image responsive using display: block and max-width: 100% and scale with the container

.img-part img {
    width: 100%;
    height: 100%;
}

👋 I hope this helps you and happy coding!