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 Component Challenge with responsive design

Will H 20

@whunter413

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


Feedback welcome! I couldn't get the css to load on GitPages. Any advice for that? Thanks.

Community feedback

@FlaviuD94

Posted

Hi @whunter413,

You could try to place the css file in the same folder as index.html, I think in this way it will run. After you did this, make a commit from your vs code then you need to go to github page change the branch to none, then save. And then you have to deploy again and in few minutes it will be back on updated. Don't forget to modify the src path for linking css file.

Have a good day and enjoy coding!

Marked as helpful

2
Chris 30

@WebDevRock

Posted

Hi Will,

Your link to your stylesheet and also to your images in the html and in the stylesheet are referencing the root directory "/" which is incorrect when you host on GitPages.

You should fashion the links to be relative to where they're being called from so "/css/styles.css" would become "./css/styles.css"

From there you'll notice your images won't show either so you'll need to do the same to any reference to your images bearing in mind that the image referenced in your CSS is one level up from your css folder so "background-image: url(/images/image-product-desktop.jpg);" becomes "background-image: url(../images/image-product-desktop.jpg);"

Hope that makes sense

Marked as helpful

1

Will H 20

@whunter413

Posted

@WebDevRock Hi Chris, thanks for the helpful criticism. I couldn't figure out why my css never loaded on gitpages. You the man.

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