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
Not Found
Not Found

Submitted

Product Preview Card

Simon 20

@simonmatt89

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


I found it very difficult to create a mobile version of this site. I have also noticed that the live site is displaying a 404 error for the images.

I'm still wrapping my head around github and uploading files.

Community feedback

Taner 190

@tanereren

Posted

Hey! Well done on completing the project

I noticed that you forgot to upload the images onto github, that along with editing the links may solve the issue - usually the image src will be written as: images/image-product-desktop.jpg - with images being the folder name

Please check out this really useful free course by Kevin Powell - Conquering Responsive Layouts - this will help with creating mobile friendly layouts

Please let me know how you get on or if you need anymore help!

Marked as helpful

1

Simon 20

@simonmatt89

Posted

@tanereren Thank you very much for the feedback!

1
Taner 190

@tanereren

Posted

@simonmatt89

No worries, I just had another look at your project and you can use the url link below to get the image to show

/images with the / meaning: path before where the CSS file lives

.left {
    width: 50%;
    background-image: url(/images/image-product-desktop.jpg);
    background-repeat: none;
    background-size: cover;
    background-position: center;

Marked as helpful

1
Simon 20

@simonmatt89

Posted

@tanereren Thanks again!, I tried to fix this issuen but I missed of the first / . Thanks for pointing that out. All of my images are now working.

1

@noonecaresman023

Posted

Hi! Regarding your problem that your images is not showing up, include your image/s when uploading them to github and reference your image path accordingly since right now your images are stored within your documents folder but github wouldn't know where that is as it is not included in the uploaded file. Also, I advise you to take a look at semantic html element for better readability, as to avoid using divs. I also noticed that you used h tags incorrectly, so, generally, if you are using h tags, use them in order, I'd avoid in using h4 without using h3 first (Note: use h1 tags once). If you are having difficulty creating a mobile version of this site, might I suggest you create mobile design first then go to desktop version. Let me know if you have more questions! Happy coding!

Marked as helpful

1

Simon 20

@simonmatt89

Posted

@noonecaresman023 Thank you, appreciate the feedback!

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