Submitted about 2 years ago

Product Preview Card | BEM, SASS

John•20

@john-jpann

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Do you have any questions about best practices?

So, I am curious about the following code snippet, is wrapping an image tag inside of a wrapper in this case a figure tag a good idea? I personally find it easier to deal with images this way.

<figure class="product-preview-card__image-container">
   <img
      src="./images/image-product-desktop.jpg"
      srcset="./images/image-product-mobile.jpg 2x"
      alt="Gabrielle Essence Eau De Parfum in a bottle"
  />
</figure>

On another note, I don't often use SRCSET. Was this a good use case for it, or are there better ways of working with multiple images?

Thanks for checking out my project!

Community feedback

Aatypic•490
@AatypicPosted about 2 years ago
Hello and congratulations on your solution !

Concerning your question it is best practice to use a <picture> tag especially when using multiple images depending on the devices width thanks to the <source> tag. You may seem to have forgotten about the 2 images changing if on desktop or mobile view, I can see only one being used ;)

You can learn more about this here > https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

You could do something like this:

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

So now the image will be the mobile one until 768px wide. If bigger it will use the default <img>

Oh and on mobile view there is a little gap between your image and the text. Don't forget a display: block in your img css reset. That should fix it.

Good luck ✌️
Marked as helpful
1
John•20
@john-jpannPosted about 2 years ago
@Aatypic

Awesome, I went in and made those tweaks, thank you for that.

I will be sure to use the picture element in the future and good spot on the mobile gap.
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord