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

Responsive landing page w/ Flexbox

TMJโ€ข 120

@TMJSMC53

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello TMJ, congratulations for your new solution!

Your solution is just amazing, is the first time I see a pixel perfect solution for this challenge. There's not much to improve here, the only advice I've for you is to wrap the product img using picture that's a practical tag for this situation where you've 2 images (desktop and mobile).

Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (mobile and desktop) by the settings for the width you'll insert in the html

If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

๐Ÿ‘‹ I hope this helps you and happy coding!

Marked as helpful

1

TMJโ€ข 120

@TMJSMC53

Posted

@correlucas Oh, wow! Thank you so much for your feedback! Iโ€™ll read up on the tag and implement it when Iโ€™m back at my computer! Thanks again and have a great day!

0

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