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 detail card using Flexbox

@Saga-sanga

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


My solution to the product preview card challenge.

Community feedback

Travolgi ๐Ÿ•โ€ข 31,400

@denielden

Posted

Hi Reckson, congratulations on completing the challenge, great job! ๐Ÿ˜

Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • use min-height: 100vh to section instead of height, otherwise the content is cut off when the browser height is less than the content
  • add transition on the element with hover effect

Hope this help! Happy coding ๐Ÿ˜‰

Marked as helpful

1
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello Reckson, Congratulations on completing this challenge!

Great solution and great start! By what I saw youโ€™re on the right track. Iโ€™ve few suggestions to you that you can consider to add to your code.You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Hereโ€™s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

โœŒ๏ธ I hope this helps you and happy coding!

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