CSS not being applied in pages :/

Hello :slight_smile: ,

i also encountered same problem . i tried diff ways and methods but still the css was not working in Github Pages

[SOLUTION] : first make your complete project locally on your PC and after finishing it. create a repository and click on the option uploading an existing file :

1


and then just drag and drop your whole project. if u want to edit something, then directly edit the code on github website. don’t use command line for github pages.

my repo : https://github.com/HarshitKumarOjha/HarshitKumarOjha.github.io
Result : https://harshitkumarojha.github.io/

your solution actually worked. thank you so much

1 Like

This did work and it is such a strange workaround.
In addition, other strange behavior I noticed:
css/style.css didn’t work. ./css/style.css didn’t work.
I had to put style.css in the root directory. I don’t have a problem with it being there but it seem GitHub needs to do some bug triage.

Adding image path in the css with ./img/1.jpg didn’t work., neither did img/1.jpg.
I ended up adding the image to the root as well as another workaround.

Not the greatest behavior. There definitely is a bug here.

You can see the oddities in https://gradientus.github.io/tea/

1 Like

Thank you it really helped a lot

1 Like

my bootstrap code is not working when i uploaded my file on github

Hi @Rohit-1604! Jekyll is ignoring the node_modules directory, which is why anything in it (like Bootstrap’s CSS and JS) is not being found.

Since it doesn’t look like you’re using Jekyll, one way to solve this would be to create an empty file named .nojekyll in the root of your publishing source. This will bypass the Jekyll portion of the Pages build process, and you should be able to successfully call files that are within node_modules.

1 Like

Now I have created the empty file named .nojekyll in the repository root. but even after that bootstrap is not applied on the page. root repository - https://github.com/Rohit-1604/fitness.git
website repository - https://rohit-1604.github.io/fitness/

Copy follwing code to your site _config.yml

theme: null

Or create a new file .nojekyll

I had this problem and I couldn’t find solution anywhere. All the folders where I placed css at were named with names starting with underscore( _ ), so I take off all underscores then it works. For example, the “_css” folder was renamed to “css”. I don’t know why it happens. Does GitHub Pages pages treat folders whose name starts with underscore as they are hidden, the same way linux hide folders whose name starts with a period( . )? Maybe

I am facing the same problem. HTML is working, but CSS is not being applied.I can’t figure it out kindly help. link to website is: https://vaishnavipandey.github.io/Personal-CV/

@ [sethclydesdale]
I am facing the same issue.
I’m trying to move my code of HTML and CSS over here. HTML is working, but CSS is not being applied. I’m obviously doing something wrong. But I can’t figure it out. link to website is: https://vaishnavipandey.github.io/Personal-CV/

Hello @VaishnaviPandey, welcome to the GitHub Support Community!

In your index.html file, you’re referencing folders that do not exist in your repo.

  1. css/styles.css
  2. images/cloud.png
  3. images/mountain.png

Removing the bold portion on these resources OR creating these folders and sticking those resources in them should resolve the issue.

In the future if you have similar issues, you can also open your browser’s devtools (F12 OR CTRL+SHIFT+I) and check the console for possible errors, since it usually gives some hints for resolving them.

Capture

In the image above you can see various 404 errors. Hovering over the resource link shows where it tried to pull the resource from.

I am new to github.I am Learning how to use it well. Thank-you so much for helping me out.

Regards
Vaishnavi Pandey

1 Like

hey! thanks man…because of u i got a way to get out of my problem

1 Like

I have the same problem and I am not able to submit my online course assignments because of it ,my URL is https://bakugou123-ai.github.io/module3solutions/,can someone please help me out? Thanks :slight_smile:

I am having some issues deploying my gh-pages site. It would seem the CSS file is not being picked up and I am not sure why? https://kubowania.github.io/pacman-AI-live/

repo: https://github.com/kubowania/pacman-AI-live

facing the same problem brother even my cloud nd mountain images are not displaying please help me out

This is happening because you’re referencing your CSS file as if it’s inside a folder called css, but your styles.css file is in the root of your repository:

You’ll either need to change this to the following, or create a folder called css and move your CSS file inside it:

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

You’re having a similar issue with your images, you’ll need to update your asset links or move them inside a folder called images.

1 Like

Thank you so much SIR <3

same problem, can someone please take a look?


thanks in advance!!!