So my site looks different on github pages than on my local host

[curtisKilgore]

I have no idea why. The styling is different and my javascript wont work now either. Here’s the link to the repo https://github.com/CurtisKil/manesseGrading_2

[SethClydesdale]

Hello @CurtisKil, welcome to the GitHub Support Community!

It appears to be a mixed-content error. Since GitHub Pages are served over HTTPS, you have to make sure that when requesting external resources they’re also served over HTTPS.

In your index.html file change the http in http://code.jquery.com/jquery-3.5.1.min.js to https and you should be good to go!

For future reference, you can also troubleshoot issues like this by opening the browser’s developer tools (F12, CTRL+SHIFT+I, or Right Click > Inspect) and check the console tab for possible errors.

[curtisKilgore]

Hi Seth! So that fixed the JS problem, but the CSS on Github Pages is still different from my localhost. What about that?

[curtisKilgore]

I just figured it out. It’s because my screen is zoomed in on my localhost 😂.

[Boogiieman]

thanks man I was facing the same issue.

[IndicKangaroo]

same issue lol

[Manankohli2310]

yes same here, got solution instead of chat-gpt now

[qlesl]

I love you

[raseyassor]

damn, facing the same issue, i feel stupid

[cr3data]

After re-checking my files multiple times , I realized I had an error in on one of my links. I started with a process of elimination. First checked what worked, then what did not work. I narrowed it down to a level ../../ (try checking that I realized when I made previous changes to my folders my link levels changed also). Hope this helps.

[NONLOSAINEMMENOTU]

If your website looks different on GitHub Pages compared to your local development environment, there are several potential reasons for this discrepancy. Here are some common issues and troubleshooting steps to help you identify and resolve the problem:

Relative Paths:

Ensure that your file paths and links are specified correctly, especially if you're using relative paths. GitHub Pages might have a different file structure than your local environment.
Case Sensitivity:

Check for any differences in capitalization in file and folder names. Windows file systems are case-insensitive, while GitHub Pages (which uses a Linux environment) is case-sensitive.
Git Repository Status:

Make sure your Git repository is up to date on GitHub. Push your latest changes to GitHub to ensure that the versions match.
External Resources:

If your site uses external resources (e.g., CDN-hosted stylesheets or JavaScript libraries), verify that these resources are accessible and not blocked.
Browser Cache:

Clear your browser cache to ensure that you are viewing the latest version of your site. Sometimes, browsers cache older versions of files, leading to differences in appearance.
Jekyll Configuration (if using Jekyll):

If your site is built with Jekyll (common for GitHub Pages), make sure that your local Jekyll environment matches the version used by GitHub Pages. You can specify the Jekyll version in your Gemfile or _config.yml file.
Base URL:

If your site relies on a base URL, make sure it's configured correctly for both your local environment and GitHub Pages. This is important if your site is not hosted at the root of the domain.
Browser Compatibility:

Ensure that your website is compatible with different browsers. Browser rendering differences might contribute to variations in appearance.
GitHub Pages Build Process:

GitHub Pages uses Jekyll for building sites. If your site relies on Jekyll plugins or specific settings, ensure that GitHub Pages supports them. You can check the GitHub Pages documentation for the supported features and versions.

[kjdeveloper8]

In my case css is not being load due to different directory name. Rename it under css/my_file.css solve the issue.

[B3WD]

A hard refresh (Ctrl+F5) fixed the issue for me. This also clears the cache and reloads all files from the server.