Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product Preview Card

P

@874anthony

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@lifeaddikt

Posted

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

P

@874anthony

Posted

@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

@halderjoydeep

Posted

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
Discord logo

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