Responsive product preview card component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  Congrats @dhatGuy for completing this challenge!

  When dealing more than one image that need to show up depending on the screen size (desktop/table/mobile), you want to use the <picture> element. So your code for the images should look like this:

  <picture>
    <source media="(min-width: )" srcset="desktop image goes here">
    <img src="mobile image goes here" alt="">
  </picture>
  

  Marked as helpful

  0

  ---

  

  Joseph Odunsi•140

  @dhatGuyPosted over 2 years ago

  @vcarames, thanks for the feedback. I tried it but couldn't understand how it works. I'll look into it again.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  @dhatGuy

  Essentially, you'll add the desktop image in the <source> element and add the min-width on the size of the screen when you want it to show.

  For the <img> tag you'll add the image that you want to after the <source> image.

  Heres a link with detail on it:

  https://www.w3schools.com/html/html_images_picture.asp

  Marked as helpful

  0

  

  Joseph Odunsi•140

  @dhatGuyPosted over 2 years ago

  @vcarames, thank you. I have successfully implemented it.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted over 2 years ago

  @dhatGuy Looks good!

  0