Product Preview Card Component

Community feedback

• 

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  Hi!

  To answer your question, generally, images that are applied using CSS are usually used for patterns or background images but here it isn't a background instead it's a picture so HTML would be more suitable here. If there's only one image that doesn't require to change with screen size then the img tag is sufficient ie

  <img src"(url to image)" alt=" />
  

  but here its changing and we are provided with 2 images, one for desktop and one for mobile so a <picture> tag.

  Here's how you can use it in this project:

  • In your .hero div add the following:

  <picture>
  <source srcset="images/image-product-mobile.jpg" media="(max-width: 780px)" >
  <img src="images/image-product-desktop.jpg" alt="Perfume Image" >
  </picture>
  

  • Here inside the <picture> element we use source to set the image we want to change at a specific screen size.
  • srcset attribute is used to set the URL path whereas media is used as a media query so as to when the image should change (in your case I'm using max-width since you have used desktop first workflow)
  • the img tag is usually used to set up the initial image and work as a normal img tag.
  • So after using this initially your image will be the desktop one but as soon the width hits 780px the image will switch from desktop to mobile (the media query we specify in source according to that)

  Its quite a good tag for responsive images. You can try playing around a lil bit and see more about it here!

  Good luck and Happy coding!🙂

  Marked as helpful

  2

  ---

  

  IrieBee•280

  @IrieBeePosted over 1 year ago

  @adityaphasu Thank you very much. It makes sense to me now when to use images (html vs css). I've never used this <picture> tag before. I will definitely look into it. Have a beautiful day!

  1

  

  Boots 😺•1,590

  @adityaphasuPosted over 1 year ago

  @ltsyBitsy By the way what insect is that in your profile picture 🦗 bahaha Im genuinely curious!

  1

  

  IrieBee•280

  @IrieBeePosted over 1 year ago

  @adityaphasu It's a ladybug. :-)

  0

  

  IrieBee•280

  @IrieBeePosted over 1 year ago

  @adityaphasu Omg, I've made some research and it looks like it's an asian ladybeetle. Kind of the same, but still...

  1
• 

  sgarcialaguna•180

  @sgarcialagunaPosted over 1 year ago

  <img src="./images/image-product-desktop.jpg"/>
  

  should work fine?

  1

  ---

  

  IrieBee•280

  @IrieBeePosted over 1 year ago

  @sgarcialaguna Thank you for your reply. I tried and it didn't work, it was hiding under the text. Have a beautiful day!

  0