Skip to content
Submitted over 2 years ago

Product preview card

Vittorio De Lucia•220
@VittorioDL
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 appreciate any suggestion to improve my code! Feel free to tell me what I could have done better. I focused mostly on the responsive aspect of the card. The change the layout of the card I applied the grid display on the desktop version and changed the image

Community feedback

  • Xavier•140
    @xavCSPosted over 2 years ago

    Overall I think you pretty much got the design and placement bang on, just a few margins and line spaces that could be adjusted I think if instead of setting the display:none on the relevant image when the viewing mode changes, you could instead use a <picture></picture> element. I'm suggesting this because the way you have it set the browser still loads both images, which isn't a good use of bandwidth, with the picture element you can dynamically tell the browser which one to load instead of loading all available images. Hope this was useful

    Marked as helpful
    0
    Vittorio De Lucia•220
    @VittorioDLPosted over 2 years ago

    @xavCS Thank you so much i didn't take that in consideration, i will use your method next time!

    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