Submitted almost 3 years ago

Product preview card component (HTML + CSS)

Leonard•1,025

@leoikeh99

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

Any and all feedback are welcomed.

Code

Please log in to post a comment

Community feedback

Prantik•660
@prantiknoor
Posted almost 3 years ago
Hey @leoikeh99. I have a little recommendation.

You used two img (one for mobile & another for desktop). You switched between images using display property.

But there is a better alternative solution. You can use picture. as an example:
```
  <picture class="image">
        <source media="(max-width: 630px)" srcset="./images/image-product-mobile.jpg">
        <img src="./images/image-product-desktop.jpg" alt="product image" class="desktop" />
   </picture>
```
Marked as helpful

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