Design comparison
Solution retrospective
Hardest part was making it responsive
Community feedback
- @correlucasPosted about 2 years ago
👾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 themobile + desktop images
.Remove the
background-color
from the container and add it to thebody
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 withbackground-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 devicemax-width
depending of the device (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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