@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
@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.
@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!
@correlucas
Posted
@ShanePinderDev Happy to hear that works Shane, I'm looking forward to see your next challenges. Keep it up!
