Design comparison
Solution retrospective
Got to learn how to have a responsive image while doing this challenge, though after hosting my code on a live site, the images seems not to be showing, what could have caused it? and i'll appreciate comments on how to get better at this.
Community feedback
- @realsalePosted over 2 years ago
Actually there is nothing wrong in your file path, however @Sukhanpreet is right images folder is missing in the sources.
Probably Netlify ignore your images folder as if it is not being referenced.
You should try suggestion of @elaineleung using
./images
,./
refers tothis directory
Marked as helpful2 - @SukhanpreetPosted over 2 years ago
Images folder is not there. Try copy the images folder, I think it will resolve the problem.
Marked as helpful2 - @correlucasPosted about 2 years ago
👾Hello Olabisi G. Adekoya, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. 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!
Marked as helpful0 - @elaineleungPosted over 2 years ago
Hi Olabisi, regarding the image links, you'll always need to make sure they start with a dot and slash, like this:
<img src="./images/{rest of your link}.jpg" />
. Also, you can try putting the background color on the body element instead of the container so that the color fills the entire page. Hope this helps!Marked as helpful0
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