Skip to content
Submitted over 2 years ago

Product preview card component solution

Dan Andrei•10
@kondrei
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

For this challenge I used <picture> tag to display different images: mobile and desktop version. It's seems to be difficult to work with this kind of tag: on iOS it does't display the image proportions and I saw a little margin at the bottom of image in desktop mode and I don't get it how to remove that. It was ok to use two div's with <img> tag and display only one regarding to screen resolution?

Thanks, and any other reviews will be welcome

Community feedback

  • Sen-Nyin•130
    @Sen-NyinPosted over 2 years ago

    Images always do seem to have a small margin by default. I usually have been able to remove that by setting the image to display: block;

    Marked as helpful
    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