CSS not being applied in pages :/

CSS appears to be working when I look at https://noethix.github.io/trial. Do you see it as working now? Or can you describe what is not working for you?

Thank you, that helped me so much; not only for CSS but also for IMAGE directories (I used to work with underline before its names, like: “_css or _image”).

So, I had to took them off and changed on HTML and CSS as well so it could work.

1 Like

Hello, I am facing the same issue. Did you happen to find a fix for it?

@noethix wrote:

Thank you @sethclydesdale for your detailed answer and the tips ! But it didn’t work either…

Hi,

I tried few things which worked for me. I assume those are not major reasons; but still you can try

  1. 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”. 

  2. Add in head tag

        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then <link rel=“stylesheet” type=“text/css” href=“main.css”>
and then <title> </title>
try shuffling the order.

It worked then; I reshuffled the order to check if that is the reason; it is working since then for no absolute reason for shuffling the order.

And I am assuming each time you commit the change; in settings under GitHub Pages Section revisit the master brance in source option and then publish. 

7 Likes

Hi,

I tried few things which worked for me. I assume those are not major reasons; but still you can try

  1. 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”. 

  2. Add in head tag

        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
and then <link rel=“stylesheet” type=“text/css” href=“main.css”>
and then <title> </title>
try shuffling the order.

It worked then; I reshuffled the order to check if that is the reason; it is working since then for no absolute reason for shuffling the order.

And I am assuming each time you commit the change; in settings under GitHub Pages Section revisit the master brance in source option and then publish. 

2 Likes

Can you help me with mine? 

https://github.com/MangbawiTawmbing/ludo

1 Like

Hello @noethix,

Thanks for bringing up this topic, as this is a very common issue we see! First of all, it does appear that after making the change suggested by @SethClydesdale your CSS did start working, and https://noethix.github.io/trial/ looks great! Sometimes it can take a minute for updates to show up, or an old version is cached by your browser, and I suspect that’s what happened here.

It also looks like @MangbawiTawmbing’s issue has been resolved as well, as I see that https://mangbawitawmbing.github.io/ludo/dicee.html is correctly displaying its CSS.

For all those coming to this topic later with a similar issue, below are some common situations where we see CSS not working properly, and how to fix it.

Check for these common issues:

Incorrect URL to the stylesheet

Sometimes people accidentally use a stylesheet URL/directory path for their local computer, e.g. <link rel=“stylesheet” type=“text/css” href=“C:\Users\MyName\Project\styles.css”>

Solution:
Use a relative path to refer to your file, e.g. <link rel=“stylesheet” type=“text/css” href=“styles.css”>.

You can learn more about relative paths and how to create them here.

Incorrect path to the stylesheet

Sometimes people reference the stylesheet at the wrong place, e.g.

<link rel=“stylesheet” type=“text/css” href=”css/styles.css”> but the stylesheet is actually at <link rel=“stylesheet” type=“text/css” href=“styles.css”>.

Solution:
Double check the path to the stylesheet.

Incorrect capitalization

People can also accidentally have capitalization that doesn’t match the filename. For example, the stylesheet is referenced like this:
<link rel=“stylesheet” type=“text/css” href=“styles.css”>.

However, the file is named styles.CSS. As a result, the stylesheet won’t be loaded since since GitHub Pages is case-sensitive.

Solution:
Double check to ensure all capitalization matches.

Better Solution:
Use all lowercase letters for all filenames and URLs.

Missing file or directory

Sometimes we find that the stylesheet or even entire css directory was never uploaded or pushed to the repository. This often happens when using the web interface to upload files.

Solution:
Ensure all files and directories have been pushed to the repository, so that the contents of the GitHub repository matches the contents of your local repository.

CSS stops working after adding custom domain

We often have people write in to tell us that their CSS was working fine until they added a custom domain to their repository. One way to prevent many of these types of issues is to use relative paths, but some site builders do use the full URL as a base path, so you may need to change a setting or two.

Solution:
Change React or Jekyll settings:

For Jekyll sites, edit _config.yml. If values are set for baseurl or url variables, we recommend deleting these lines entirely. This will allow GitHub Pages to detect and configure the ideal baseurl and url values in the background, automatically adjusting for changes to your site’s custom domain.

For React sites, edit package.json. Change the “homepage” setting to your custom domain. Ensure that this setting matches the exact domain specified in your repository’s CNAME file.

For example, if your CNAME file contains mydomain.com, your package.json file should contain:

“homepage”: “https://domain.com”

If your CNAME file contains www.mydomain.com, your package.json file should contain:

“homepage”: “https://www.domain.com”

Additional Resources

If you are here looking for a solution to your CSS issue, I hope we’ve been able to help with the information above! Here are some additional resources that may be helpful:

Explanation of absolute vs. relative paths:

Introduction to using cascading style sheets:

Instructions on deploying a React app to GitHub Pages:

3 Likes

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.

3 Likes

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.

1 Like

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