CSS not working on GitHub Pages

I just finished the Excursion project on Codecademy’s Full Stack Development career path and I pushed my code to a repository on GitHub. When I open the html file locally from my computer, everything looks fine but when I open it on Github pages, it’s missing the css styles and the images. Basically it looks like a plain html skeleton website. I made my path to the stylesheet relative to my html file but I can’t figure out what’s wrong.

Here is my repository in Github:

Also here’s a link to my Github Pages:

The Resources folder name in your project starts with a capital R, but in the HTML code, it’s with a lower r.

If you are on Windows, the folder’s names are not case sensitive but on a Unix system (and GitHub is running on a Unix system), the folder’s names are. This means that resources is not the same folder as Resources. :wink:

1 Like

That seemed to work, thank you! Just a few questions:

  • I ended up having to change the slashes from forward slash to backslash, is that the proper way to do it on GitHub? I use a Mac so I do forward slash.
  • Why did GitHub capitalize the resources folder if its saved as all lowercase on my computer?
  • The video clip of the phone doesn’t seem to be working still. The image is there but the video isn’t looping through, do you know why that is?
  • The forward slashes should work fine (and should be the ones to use)
  • Really strange, I’ve got no idea why. Especially if you are working with a Mac.
  • The source in the HTML contains a s to the video folder name, which is not the case for the folder itself (I saw that you’d fixed this point)

It seems that the video is not auto-starting; I think you may try to add the muted to fix the problem (<video>: The Video Embed element - HTML: HyperText Markup Language | MDN)

Adding the muted worked! Thanks again!

1 Like

Remove the css folder and keep your index file and css at same place, and remove the hierarchy in link attribute as href=“main.css”.
Add in head tag

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then
and then
try shuffling the order.
It worked then.

1 Like

Hi, my css isn’t working on github pages also. i’m a beginner, and i’ve tried everything

Here’s the github link GitHub - Bill-Adepoju/3-preview


I’d like to ask help too. CSS file isn’t recognized. Got the same issue as his.
GitHub: https://shinjix-web.github.io/excursion/

Hello everyone,

My CSS page is not been recognized on my GitHub page.

Here is the link to the page: GitHub - VIKB-Oficial/Repo

Thanks, everyone for the help.

This has helped. I used a CSS folder. After removing it, it worked perfect!