Search code examples
cssgithub-pages

CSS display issues with github pages


Having trouble displaying my css on github pages. Everything works when ran in default browser (as seen in image) however when I published to pages it fails to load with the css. I have tried changing the href tag but not sure what I'm doing wrong at this point after a couple attempts at changing around the link.

Link to Repo: https://github.com/trentstanley92/02ProfessionalPortfolio Link to Pages: https://trentstanley92.github.io/02ProfessionalPortfolio/

Default browser css loading

I have tried changing the href link to 02ProfessionalPortfolio/Assets/styles.css tag a couple times. Ultimately the one linked above is my final attempt after starting at link rel="stylesheet" href="=./Assets/styles.css". I expected the second line to pull up the css on its own, however after it didnt I messed around with the capitalization and the ./ at the beginning and when those did not work I resulted to the first and final attempt, which did not work either.


Solution

  • Use your web browser's Developer tools.

    Your page is trying to load this: https://trentstanley92.github.io/02ProfessionalPortfolio/02ProfessionalPortfolio/Assets/styles.css

    But the file lives here: https://trentstanley92.github.io/02ProfessionalPortfolio/Assets/styles.css

    Your index.html is already at 02ProfessionalPortfolio, so you just need to write it as follows to hit the relative address:

    <link rel="stylesheet" href="Assets/styles.css" />