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

Ash Haghighiβ€’ 110

@ashkanmus

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


Feedback appreciated!

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘ΎHello Ash Haghighi, congratulations for your new solution!

Your solution is just great, you did pretty much everything, the solution is fully responsive. I think to improve that instead of using two images inside a div you can wrap both images using <picture> to have the images desktop and mobile images together in the same tag, and render each image depending of the device (desktop and MOBILE) by the settings for the width you'll insert in the html.

Here's a guide for the tag picture: https://www.w3schools.com/tags/tag_picture.asp

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

Marked as helpful

0

Ash Haghighiβ€’ 110

@ashkanmus

Posted

Hell @correlucas, thank you so much for taking the time to check my work; also, I appreciate this excellent technique. I love the website and this friendly community; I look forward to improving by completing more challenges here.

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