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.)
Related
I'm trying to host my page on Github Pages but it is not recognizing my CSS file. I've tried changing the names, rearranging the folders and it still doesn't work. Does anyone know what can I do?
Here is my GitHub project.
I tried change the folder names, and putting the CSS file in the main folder.
Your index.html file is on the same level as your css folder. You'll need to remove ./ from ./css/style.css and you should be fine.
EDIT: I just checked it out and it looks like the CSS is loading.
Your github page
If you change your CSS link from
<link rel="stylesheet" href="./css/style.css">
to
<link rel="stylesheet" href="css/style.css">
I think your css wil work, happy coding!
So I'm coding on VS Code. I have Sass installed and I'm coding with it. When I view it in localhost, it looks how I want it to be. Then I upload it to GitHub and for some reason it is not working on GH Pages. Here is the link: GitHub Dark Mode
I was trying to make a Dark Mode that I could add on my site. Here is the original tut CodePen that I followed: The CodePen. Do I have to convert it all to CSS?
Can you all please help?
Best,
NotDiamondZ
You need to compile the Sass file and call it on your html with .css extension instead of .scss
eg.
<link rel="stylesheet" type="text/css" href="styles.css">
Perhaps you can check out this CSS cannot be loaded from file: URLs unless they end in a .css file extension
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">
I just built my first website from scratch. All of my CSS and images are linked just fine from my computer, but when I uploaded everything to my hosting site (using Fat Cow) all of the links broke. So now I have an unstyled page with no images.
My .html is in the root directory and there are folders for my CSS, Fonts, Images, and JS. My style sheets are currently linked like this:
<link rel="stylesheet" href="css/style.css" />
This is what I've tried so far:
Moving style.css out of the CSS folder into the root and linking it
as "style.css"
Creating a new style.css directly in the root
linking it as "style.css"
Linking style.css (one in the root) as
"root/style.css"
Linking style.css (one in the root) as "fulldomainname/style.css"
This is my daughter's birthday present. Any help would be greatly appreciated!
Sarah
<link rel="stylesheet" type="text/css" href="http://www.yoursitedomain.com/css/styles.css">
try the above code and upload via ftp
Check FTP and make sure files are Uploaded properly, I advice you to download one and check it's not corrupt while uploading.
Check file path with "http://..."
check with relative path as well.
if you can't find solution please share link of your site so i can check it out.
It could also be a server permissions issue, meaning that you have to set up permissions for all the files in project.
link
Try to give full link of your website like
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/css/styles.css"/>
Put it into head section of your html page code.
I am working on a remote instance using amazon ec2 instances and created an index.html file. In that HTML file, I have created links to an external CSS file which is in the same directory as my index.html file but when I try it out in chrome it doesn't seem to find the CSS file and gives me a 404 not found an error. I have tried doing the same thing on my local machine and it works just fine there. Am I missing something? How can I fix this issue? Any help is appreciated, thank you.
This is the part of the code i am confused with:
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css" media="screen" href="signin.css">
</head>
Try the usual suspects:
1. Renaming your css file
2. Check if it works on you local machine. You've done that, so it's a server related issue.
3. Try absolute path for the css
4. Try other browsers, maybe it's just chrome