Skip to content
Submitted 8 months ago

Product preview card component using responsive image elements

P
Sayed Ali•110
@sydalwedaie
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?
  • Use the `` element to create responsive images. It allowed me to dynamically load the correct image based on the viewport size.
  • Use CSS Local fonts
  • Use element::before selector and the content: url() property to set the shopping cart icon. Bonus: It automatically sets the image to the appropriate size!
What challenges did you encounter, and how did you overcome them?

object-fit property needs a set width and height on the element. I had a situation where the image container was shorter than the adjacent info container. I solved it by setting the height to 100% with object-fit: cover. The width was already set at 100%.

What specific areas of your project would you like help with?

When the viewport hits the breakpoint, sometimes I see a flicker as the browser tries to change the picture from mobile to desktop and vice-versa. I'm not sure what's the reason and how to fix it.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Petter Torst Saatvedt•180
    @PetterTSaatvedt

    Great work Sayed! The solution aligns well with the provided design, and functions well on all screen sizes :)

    Your code is neatly structured which makes it easy to read and understand, while supporting maintainability of the code! I'm not seeing much that could be improved, to be honest, so well done!

    As for the flicker you mentioned upon changing images, I assume this is simply due to the fact that the browser needs to load the other picture every time there is a change in layout. I would assume this could be fixed through caching of the images, so that they are already available when needed, however this would demand some JavaScript, which isn't necessary for this particular project :)

    Keep up the good work!

    Marked as helpful

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