Skip to content
Submitted over 1 year ago

Responsive Product Review Card using CSS Grid and Flexbox

Abu-AbdiLlah-AlBukhaaree•40
@Abu-AbdiLlah-AlBukhaaree
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

Two images were provided. One will be visible in the mobile view while the other will be visible in the desktop view.

I achieved this by setting display to none on either image when necessary.

Is there a better way to change the image being displayed when changing from mobile to desktop display?

Community feedback

  • Rebecca Padgett•1,860
    @bccpadgePosted over 1 year ago

    Hello @Abu-AbdiLlah-AlBukhaaree. Congratulations on completing this challenge!! 🎉

    You can use the picture tag to change the images responsively in HTML.

    <picture>
<source media="(min-width: 37.5em)" srcset="./assets/images/image-product-desktop.jpg" />
<img src="./assets/images/image-product-mobile.jpg" alt="Gabrielle Essence Perfume bottle laying down with a green leaf above and below it" />
</picture>

    More info 📚

    HTML picture tag

    Hope this helps you and don't hesitate to reach out me if you have any questions

    Marked as helpful
    0
    Abu-AbdiLlah-AlBukhaaree•40
    @Abu-AbdiLlah-AlBukhaareePosted over 1 year ago

    @bccpadge Thanks a lot.

    0

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