@correlucas
Posted
👾Hello Michael East, congratulations for your new solution!
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.
In this case its better you use and import the image by the HTML and not the css, because since its a product image, you'll need it optimized for SEO and adding this in the CSS as background-image its not the best choice to have the image found by the searching engines.
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
@MrEasty94
Posted
@correlucas Thanks Lucas, that was the one area I was unsure about, so I need to do more research on the picture tag, and how to make it dynamically change based on screen width.
Appreciate the advice.
@Deolabest
Posted
@correlucas Thanks. I find this helpful as well.
