Submitted about 2 years ago

Product Preview Card Component - Responsive

Sudharshan S• 90

@Sudharshan-24

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It is an interesting challenge I loved it a lot by doing this challenge. However, I am unable to make the mobile images responsive manner.

Solved image issue for mobile view :)

Community feedback

Cagri Kizilkan• 210

@cgrkzlkn

Posted about 2 years ago

Great job! You can use picture and source elements for responsive images:

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

Sudharshan S• 90

@Sudharshan-24

Posted about 2 years ago

@cgrkzlkn thank you for your suggestion Cagri.

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