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

1 Like

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.

8 Likes

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

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.

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. 

4 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. 

1 Like

Can you help me with mine? 

https://github.com/MangbawiTawmbing/ludo