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

Product preview card component solution

@kondrei

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


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-Nyin

Posted

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
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