Responsive Product reviewer card

Community feedback

• 

  Fortune Iyoha•280

  @fortuneiyohaPosted about 1 year 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!

  Marked as helpful

  0

  ---

  

  Roxana Valeria Solernou•20

  @RoxxVSPosted about 1 year ago

  @fortune-i-o Hello! Thank you very much for your comment. I'm just learning, so all advice is welcome, and I think yours will be very useful. I will be putting it into practice.

  0
• 

  Nelson Pascual•130

  @NelPascualPosted about 1 year 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.

  Marked as helpful

  0

  ---

  

  Roxana Valeria Solernou•20

  @RoxxVSPosted about 1 year ago

  @NelPascual Hello! I don't know that app but I'm going to try it. Thank you very much for your advice, I will keep it in mind in my next projects.

  0