Product preview card component

Community feedback

• 

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  First of all, Milo, your page is looking neat!

  I believe the best way to do that is actually with HTML <picture>. Here's a snippet from my solution for reference:

          <picture>
            <source
              media="(max-width: 687px)"
              srcset="./images/image-product-mobile.jpg"
            />
            <img
              src="./images/image-product-desktop.jpg"
              alt="Glass of perfume lying on a white table with branches of leaves"
            />
          </picture>
  

  To make it even better, you can specify height and width for the image. Hope it helps, cheers!

  Marked as helpful

  0

  ---

  

  Milos•40

  @milosandjelkovicPosted over 2 years ago

  Thank you @joaojgabriel. I tried the <picture> way but it didn't work for some reason. I will probably give another try to that idea.

  0

  

  João Gabriel•340

  @joaojgabrielPosted over 2 years ago

  @milosandjelkovic, while you're at it, I recommend having MDN Guides like the one on HTML Responsive Images at hand, so you can peek at the syntax and brush up the understanding. :)

  0