Skip to content
Submitted over 1 year ago

Vite project using only html and css

CoconutDev13•50
@CoconutDev13
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

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
    @rileydevdznPosted over 1 year ago

    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•50
    @CoconutDev13Posted over 1 year ago

    @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

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