Product Preview Card Component with Vanilla HTML & CSS

Community feedback

• 

  IO•690

  @i000oPosted 4 months ago

  Hi!

  In regards to the picture, look up 'art direction' where you as a dev can ask the browser to swap out different images (in this case, although the image is the same but the crop is different, think of them as different images) depending on the viewport. This way it only loads one based on the conditions you outline.

  I'm adding a code snippet of what I wrote in in my solution. In this instance, you need to house the <img> tag and others including srcset within a <picture> tag for it to work.

  <picture>
          <source
          srcset="images/image-product-mobile.jpg"
          media="(max-width: 425px)">
          
          <source
          srcset="images/image-product-desktop.jpg"
          media="(min-width: 426px)">
  
          <img src="images/image-product-mobile.jpg" alt="image of perfume">
        </picture>
  
  

  Hope this helps! I think it's a more useful thing to know than to opt for display: none; with both loaded.

  Marked as helpful

  1

  ---

  

  Kamal Redzwan•210

  @kmlrdzwnPosted 4 months ago

  @i000o Thanks for this, I have change my code to yours, but my problem now is the picture height looks weird. Do I change the height so that it matches the bottom details?

  EDIT: Finally solve the height bug, I use a larger breakpoint on the image source.

  0