Responsive Product reviewer card

Congratulations on completing the challenge! 🎉

Picture Tag 📸:

• Noticed you're using media queries to swap images? Consider the <picture> tag, perfect for responsive images and art direction.
• Example:

  <picture>
    <source media="(min-width: 900px)" srcset="large-image.jpg">
    <source media="(min-width: 768px)" srcset="small-image.jpg">
    <img src="fallback-image.jpg" alt="Example image">
  </picture>

• It allows different images for various screens without CSS, improving load times by serving optimized images.

• Questions? Check my submission or reach out anytime.

• For more information, you can Learn More about the <picture> element on W3Schools.

Great job! 😄

Happy coding!

Hello Roxana. I hope you are feeling well. According to your concern about how to handle responsive images, looking at your code I understand that you started the project from the desktop perspective, since the image you call at first is the image-product-desktop.jpg, based on this I think that things are generated that you do not expect, you should change it to image-product-mobile.jpg; then in the media queries you use the desktop, in my case the image that corresponds to mobile I use it up to a maximum of 640px, from then on I change to the desktop.

A tool that I use to see the responsive details, at the time of developing the code is the app called ResponsevelyApp, I do not know if you know it?

I hope I didn't confuse you, or misunderstand your concern, anyway, if you have any questions we are at your service.