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" />

Leave a Reply