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 main

P
Shane Pinderβ€’ 190

@ShanePinderDev

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


Any suggestions for improvement welcome.

Community feedback

Lucas πŸ‘Ύβ€’ 104,400

@correlucas

Posted

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

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

Heres a guide to use picture https://www.w3schools.com/tags/tag_picture.asp

Something you need to fix is the card responsiveness using max-width to make the container contract and scales with the screen.

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

Marked as helpful

1

P
Shane Pinderβ€’ 190

@ShanePinderDev

Posted

@correlucas

Thanks very much for this!

I thought there must be a better way to deal with the issue of different pictures for the desktop and mobile screens. I will have a look at the picture link that you included.

I will also have a look at the card responsiveness issue.

1
P
Shane Pinderβ€’ 190

@ShanePinderDev

Posted

@correlucas I've amended the html to use the picture element and I've also amended the css to use max-width. Thanks again!

1
Lucas πŸ‘Ύβ€’ 104,400

@correlucas

Posted

@ShanePinderDev Happy to hear that works Shane, I'm looking forward to see your next challenges. Keep it up!

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