Responsive Product reviewer card

Community feedback

• 

  Fortune Iyoha•310

  @fortuneiyoha

  Posted almost 2 years ago

  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!

  01

  Marked as helpful
• 

  Nelson Pascual•130

  @NelPascual

  Posted almost 2 years ago

  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.

  01

  Marked as helpful