I have uploaded all of my files to my repo. Everything seems to be working fine locally but the CSS files and images are not loading on the actual website.
Link to the repo: https://github.com/Hammad-H/Hammad-H.github.io
have you linked them correctly using:
<link rel="stylesheet" type="text/css" href="cssFileName.css">
Related
I was working on a preview card component and when I uploaded my code to a repo to deploy it, github doesn't seem to load my css file style.
note: not my first time to deploy on github pages.
thanks in advance!
repo link: https://github.com/HanyAyad/Stats-preview-card-component-
live-website link on github pages: https://hanyayad.github.io/Stats-preview-card-component-/
same website deployed on netlify (working fine): https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/
Maybe because the folder is CSS/styles.css and your declaration in index.html is css/styles.css?
I just tested here and when importing your CSS file, you are using
<link rel="stylesheet" href="css/style.css">
when you should be using
<link rel="stylesheet" href="CSS/style.css" >
URLs may be case-sensitive, it depends on what file system you are running your website.
Try renaming the folder CSS to css.
The directory in your repo is named CSS and not css as expected. So, please rename the directory.
It only works on Netlify because it doesn't take casing into account, for some reason. (That is, https://62116b02da6915993f04d79c--suspicious-hypatia-156ece.netlify.app/CsS/sTyLe.css works fine.)
I have 3 pages:
index.html
pages/top-ten.html
pages/contact.html
My CSS code is in
css/css.css
Everything is fine with the index.html but when I copy the code to the other 2 pages the CSS isn't responding to that.
I'll attach snippets of the code index.html
Change
<link rel="stylesheet" href="./css/css.css">
to
<link rel="stylesheet" href="../css/css.css">
This will find the css file from those files which are one level deeper in the pages folder.
I am trying to host a website on GitHub Pages which seems to only work if I place the HTML, CSS and JS files in the root folder. But the problem with this is that the positioning of elements on a page of my website is messed up.
Folder structure where files are together with faulty result:
HTML: <link rel="stylesheet" href="home.css">
Folder structure where files are separated with correct result:
HTML: <link rel="stylesheet" href="/css/home.css">
Will anyone explain why this problem occurs?
I have a site published with GitHub pages:
https://safelyswift.github.io/Swizzle/
I want to use docs/css/style.css in my index.html file. I have tried using the full url, GitHub raw url, and shortened url but none of them work.
ie: I have tried many variations on this line:
<link rel="stylesheet" href="https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css">
<link rel="stylesheet" href="/Swizzle/docs/css/style.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/SafelySwift/Swizzle/master/docs/css/style.css">
but none work.
Getting error:
Did not parse stylesheet at 'https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css' because non CSS MIME types are not allowed in strict mode.
in Safari debug console.
Try: <link rel="stylesheet" href="css/style.css">
You should link to css/style.css, which is short of https://safelyswift.github.io/Swizzle/css/style.css because the root directory of your GitHub Page is /docs.
The reason "https://github.com/SafelySwift/Swizzle/blob/master/docs/css/style.css" not work is because this link actually goes to the GitHub code preview page. It's not a valid CSS file but an HTML page with lots of GitHub functions(preview, commit log, history, etc.) But "https://safelyswift.github.io/Swizzle/css/style.css" is served by GitHub Page, so this link contains only pure CSS file which is valid.
To see the difference between these files. Just navigate these link with your browser, and right-click your page to see the source code. You can see what your browser sees there.
I read different questions on stackoverflow regarding this issue but i haven't got any solution for my case, the rest of my pages are displaying css well, but index.html doesn't display.
But surprisingly when i run my project locally it works very well.
What am i missing?
My github pages link :
https://huxaiphaer.github.io/-Ride-My-Way/index.html
My github project link , in the branch gh-pages:
https://github.com/huxaiphaer/-Ride-My-Way/tree/gh-pages
Your href was wrong for your css import. You were navigating up more folder.
<link rel="stylesheet" type="text/css" media="screen" href="UI/css/index.css">