CSS not being applied in pages :/

Hello eveyone,

I am new to github. I’ve been following tutoials etc on how to set up pages. Now, i’m trying to move my codepen 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.

https://github.com/noethix/trial

Thank you in advance fo any pointers.

Cecile

5 Likes

Hi @noethix,

Looking at your page, it appears the issue is the “/” at the beginning of your stylesheet’s source. Change “/css/main.css” to “css/main.css” (on line 5 of index.html) and it should fix the issue you’re having.

For future reference, if the html file is in the same directory as another folder or file, you don’t need to include a slash at the beginning of the src or href attributes. Also, if you need to access files up one, two, or however many directories, you can use two periods as a substitute. (example below)

say our folders are…

root --> resources --> stylesheet.css

root --> lessons --> lesson-1 --> exercise-1 --> index.html

For our html file to access the stylesheet we could provide the following.

<link rel="stylesheet" href="../../../resources/stylesheet.min.css">

Basically two “…” moves up a directory and since index.html was three directories down, we moved up three times until we were in the root thus able to access the resources folder. You can also reference the current directory with “./”.

If any questions, let us know.

13 Likes

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

2 Likes

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.

2 Likes

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. 

5 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:

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

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/