Skip to content
Submitted about 2 years ago

Product Preview Card Component - Responsive

Sudharshan S•90
@Sudharshan-24
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @cgrkzlknPosted 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>
    0
    Sudharshan S•90
    @Sudharshan-24Posted about 2 years ago

    @cgrkzlkn thank you for your suggestion Cagri.

    1

Please log in to post a comment

Log in with GitHub

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