Order Summary Component with flex

Hi, Salman! 👋

Congratulations on finishing this challenge! 🎉

One suggestion I have is to leave the alternative text empty (alt="") for the music icon and the illustration. Those are decorative images. It means that they don't add any meaningful information to the page. This will tell the screen reader to simply skip over the image.

I recommend visiting the Solid Start website. Right there, it will give you an overview of web accessibility. Knowing about web accessibility will impact the way you write your code significantly.

I hope this helps! Happy coding!

But it's not shrinking itself when review responsive design. Review my project here: https://www.frontendmentor.io/solutions/order-summary-using-grid-and-flex-tc2TOYFWCb

I also added padding both sides that u skipped when reviewing in mobile layout.

Hi @MXalman 👋, good job for completing this challenge!

Here are some suggestions to improve your code:

• Use max-width: 350px to main selector instead of width.
• Use min-height: 500px to main selector instead of height.
• You can use <picture> tag when you need to change the image on different viewports, in this case it would be enough to use the div element, or use the image directly since the style of the <picture> is not modified, also remember to update the image with width: 100%;.
• You should use the <a> tag to cancel the order

<a href="#" >Cancel Order</a>

I hope those tips will help you.

Good Job and happy coding !