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

Vite project using only html and css

#vite

@CoconutDev13

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


I found a little bit tricky how can I change the image source because they are 2 versions(mobile and desktop) of the image. I'm a little bit unsure about the way I placed the image. I did it using background css property I think srcset could be better solution. What do you think about it?

Community feedback

Riley 260

@rileydevdzn

Posted

Hi! Congrats on completing the product preview card!

For this card, the image is more informative for the user and not decorative, it would be better to use an element (like <img> or <picture>) for this image instead of CSS background.

You are spot-on with your question about changing sources for the 2 images! Since the provided images are a full-size desktop image and cropped version for mobile, we're looking at the art direction problem. A great way to do this is with the <picture> element, which uses the srcset attribute. 😃

Marked as helpful

3

@CoconutDev13

Posted

@rileydevdzn Hey! Thank you for your response. I'll bear in mind picture and for sure I'll use it in my next attempt

0

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