Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Not Found

Submitted

Responsive product preview card with HTML and CSS

Ellen 10

@ellenycc

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone, the image is broken for some reason and I checked the path is correct. Could somebody please let me know how to fix this? Any comments on this is also welcome!

Community feedback

Ryoshi1001 140

@Ryoshi1001

Posted

Hope can be good very nice website landing card made. Wanted to give a idea of how to fix but this has to do with the image file. Me tested your good code in vscode and there removed the forward / before the images folder in src for the drawing. Had a idea this could be cause of it not showing it works ok on vscode and live server but when added to github it does not work. Added your html and files to test on github for you and with the / before the images folder it did not render on a live page than tested it again for you without the forward line / in src in github and the new page has the picture in it. Sometimes you can go to github and change the index.html there without uploading a new html file or making a new repository but the changes to your landing card can take some time to update on the live website you can just erase the repository if you used githubs website and than start it again with the new index.html. It is not your fault because if you look at the file path it should have /images/... but maybe there is another reason it works with no forward / hope this helps some thank you take care gn gm fren

This works here and fixed it: erase / before images folder <img src=" images/image-product-desktop.jpg" id="preview-card__image" alt="product image">

Marked as helpful

0

Ellen 10

@ellenycc

Posted

@Ryoshi1001 Thank you so much for taking the time to look into this! It works after removing the slash. It is weird though because I had / in the file path for other projects and it works. Anyway, really appreciate your help!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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