GitHub Community
So my site looks different on github pages than on my local host #22849
-
|
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 |
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 10 replies
-
|
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 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. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Seth! So that fixed the JS problem, but the CSS on Github Pages is still different from my localhost. What about that? |
Beta Was this translation helpful? Give feedback.
-
|
I just figured it out. It’s because my screen is zoomed in on my localhost 😂. |
Beta Was this translation helpful? Give feedback.
-
|
This unforutnately is not my issue. even all the responsive nature works properly, just not all the css is being read or something and half the images load while half refuse. |
Beta Was this translation helpful? Give feedback.
-
|
Same thing here . I have html and css but looks good on vs code live server but missing half the images and the pages are "all Jacked Up". Looks like my CSS is not being read. Did you find any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
same here |
Beta Was this translation helpful? Give feedback.
-
|
Lmao you saved me. Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
NOOOOOOOO FAKING THIS WAY, THIS IS TRUEE MY ZOOM ARE 80% DAMNNN, |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. 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. Make sure your Git repository is up to date on GitHub. Push your latest changes to GitHub to ensure that the versions match. If your site uses external resources (e.g., CDN-hosted stylesheets or JavaScript libraries), verify that these resources are accessible and not blocked. 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. 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. 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. Ensure that your website is compatible with different browsers. Browser rendering differences might contribute to variations in appearance. 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. |
Beta Was this translation helpful? Give feedback.
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.htmlfile change the http inhttp://code.jquery.com/jquery-3.5.1.min.jsto 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.