Skip to content
Submitted about 2 years ago

Responsive product-preview-card-component using CSS Flexbox

Ssembatya Dennis Duncan•260
@ssembatya-dennis
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

As I attempting this challenge I discovered that I had to display different images basing on a screen specific screen size and am inquiring for the best way to approach this issue with HTML because I used CSS, by hiding one image and displaying the other at a certain media screen and I believe this is not efficient for it makes users with small screen sizes fetch big desktop images cause they still do exist in the DOM which wastes bandwidth.

Community feedback

  • Md5 dalton•1,430
    @md5daltonPosted about 2 years ago

    Hello ssembatya-dennis 👋

    If you want to implement responsive images in your app, picture HTML element is the best choice to go with. You can use it load appropriate images depending on the device screen size. Here's how you can use it in your app:

    <picture>
    <source srcset="/images/image-product-desktop.jpg" media="(min-width: 576px)" />
    <img src="/images/image-product-mobile.jpg" alt="transparent perfume bottle" />
</picture>

    I hope that helps. 👌

    Marked as helpful
    1
    Ssembatya Dennis Duncan•260
    @ssembatya-dennisPosted about 2 years ago

    @md5dalton Thanks a lot, Yah indeed that helped

    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