@correlucas
Posted
👾Hello Neil, congratulations for your new solution!
🎯 Your solution its almost done and I’ve some tips to help you to improve it:
You've done the design for the wrong image, when you download the starter files the folder comes with 3 files (preview card, desktop and mobile) you've created the solution based on the preview and you should consider only the mobile + desktop images.
Remove the background-color from the container and add it to the body to make sure this color background will be display it full screen.
A shortcut to deal with the multiple images in this challenge is by using the <picture> tag instead of importing this as an <img> or using a div with background-image. Use this tag to make the image change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS since this will make harder to the image be found. 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!
