Skip to content
Submitted over 2 years ago

Product Preview Card

Anthony Acosta M.•100
@874anthony
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

Hi everyone, I just want some feedback about best practices when trying to display one image or another, so when I did the design for mobile I needed to use the mobile version of the image, and then for desktop the larger one, but needed to use JavaScript for that

Is any possible way to do this with CSS that I'm missing? Or it just can be done with JavaScript only?

Thanks in advance for any other tip or recommendation.

Community feedback

  • Victor Paumier•140
    @lifeaddiktPosted over 2 years ago

    You can do it again more simple than using CSS. Use the <picture> tag with <source> tags. Inside a picture tag you can have multiples sources tags which have media attribute. Media attribute says the max-width or min-width of the screen and use the good src.

    Sorry i dont speak english very well.

    Check that : https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture

    Hope it will help

    Marked as helpful
    2
    Anthony Acosta M.•100
    @874anthonyPosted over 2 years ago

    @lifeaddikt Hey man, don't worry, your english was good enough to understand everything you said, big thanks for linking that resource, didn't knew about that use of the picture tag. This is what I was looking for. Thanks for this one.

    0
  • Joydeep Halder•110
    @halderjoydeepPosted over 2 years ago

    Hi Anthony, instead of javascript, you can use two img. one for desktop version and one for mobile. on desktop screen, make mobile image display to none. and for mobile screen, make desktop image display to none.

    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