CSS not working in Github Pages

[jasminehuelgas]

Select Topic Area

Question

Body

Guys! can you help me out my website is not working properly in github pages. The CSS is not working.

[ThisIs-Developer]

Troubleshooting CSS Issues on GitHub Pages

1. Check CSS File Path:

   • Ensure the CSS file path is correct and relative to the HTML file.

2. Check for Case Sensitivity:

   • GitHub Pages is case-sensitive; make sure the file names and paths match exactly.

3. Inspect Network Requests:

   • Use browser Developer Tools to check if the CSS file is being loaded correctly.

4. Verify File Upload:

   • Ensure the CSS file is properly committed and pushed to the repository.

5. Check for Cache Issues:

   • Clear browser cache or try a hard refresh (Ctrl+F5 or Cmd+Shift+R).

6. Review HTML Link Tags:

   • Ensure <link> tags are correct:

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

7. Check GitHub Pages Settings:

   • Confirm your GitHub Pages settings are pointing to the correct branch and folder.

If this helps, please mark as answer!😴

[LiteBrite82]

@jasminehuelgas
Start with resolving the errors in the console. Change your hrefs from http to https

[ThisIs-Developer]

@jasminehuelgas

• Fix: Update the resource URLs to use HTTPS. For example, change:

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  to:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

[jasminehuelgas]

Hello! So I followed the steps that you advised me, but the CSS still isn't working. I really don't know what to do anymore.

[Raykesh-Soneka]

Hi Jasmine Huelgas @jasminehuelgas ,

I look into the repo : https://github.com/jasminehuelgas/jasminehuelgas.github.io
And in this site, the css still don't work.

For the following file in lines 7 and 9, you have to put the s in http, like @ThisIs-Developer showed you.

• index.html
• contact.html
• services.html
• about.html
• Resume.html
• portfolio.html

CSS

line 7 to 9 :

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Into

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Note

You can copy paste the change.

[jasminehuelgas]

Hello! So I followed the steps that you advised me, but the CSS still isn't working. I really don't know what to do anymore.

[LiteBrite82]

Answered in subsequent post: https://github.com/orgs/community/discussions/143525