Responsive order summary card with the use of flexbox

Hello @BishanKD!

In addition to all the suggestions Melvin gave you on the previous comment, you can also improve the semantics of your HTML code by wrapping the main content with main instead of div and h1 for the main title instead of h3.

These changes help you to improve the SEO optimization as well as the accessibility of your project.

I hope it helps!

Happy New Year!

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• Use background-size: contain; instead of cover to prevent the background image from becoming too large and distorting, as shown in the photo.

• If you're using a background image, you can also assign a background color without conflicts. You can write background-color: hsl(225deg, 100%, 94%); to apply the challenge's background color.

• Use background-repeat: no-repeat; to prevent the image from repeating in all directions, ensuring a single background image.

• Employ a max-width: 400px instead of a percentage-based width to have better control over component resizing and prevent excessive growth.

• Use min-height: 100vh instead of height. Setting the height to 100vh may result in the component being cut off on smaller screens, such as a mobile phone in landscape orientation.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding and Happy New Year! 🎉🎊🎁