CSS not working when in a subfolder

[skunian]

I’m having an issue on my site scottkunian.com

If i place my css file in a folder called css and link to them in my html none of my styles or images load. If I move the file out to the htdocs folder and change the links in the html it works fine.

What do I need to enter for the path if I have my css files in a seperate folder. i had it as “css/name.css”

[Ziverre]

@skunian

“css/name.css”

Change it to /css/name.css

[skunian]

Thanks that appears to be working!!.

Now the issue is when the css files calls on an image in the image folder or a font in the font folder it doesn’t load them. The normal url(“…/images/name.png”) doesn’t work and I also tried url(“/…/images/name.png.”) also not working. Any ideas on how to call the folder thats one level back?

[Frank419]

The correct way of referring to the parent directory is .., (2 dots), not ....(3 dots)

Please use some Google instead of interpreting stuffs and end up complaining why it doesn’t work.

[skunian]

Sorry the 3 dots was a typo. In the actual code it is two dots. Don’t assume because you saw an extra “.” I didn’t google for hours. The issue persists with any code that is located in a folder. The code works 100% correctly when run locally and using the same exact file structure.

[Frank419]

Sorry for the offence then!

I currently don’t have any suitable devices to check your site’s codes, but it’s possible that some files was too big and get deleted. This is usually the case for fonts, and sometime images. Please make sure the files you wanted to use is located in the correct folder.

What is the file/upload size limit

On all InfinityFree servers is a file size limit of 10 MB. It’s important to note that this is a file size limit and not an upload limit. The difference is subtle, but important. An upload limit could be set through PHP settings, but this limit is enforced on the file system level. No PHP configuration can override this limit and it applies to files uploaded through FTP or the file manager as well. Can the limit be increased? No. The size limit is fixed and cannot be increased in any way. 10 M…

[ChrisPAR]

I’ve detected one problem in your site so far:

For My Games, using https://scottkunian.com/CSS/games.css, you haven’t closed the @font-face rule before the h1 rule starts, so the CSS there is broken:

@font-face {
    font-family: "moonrocks";
    src: url("../Fonts/rubikmoonrocks-regular-webfont.woff") format("woff"),
        url("../Fonts/rubikmoonrocks-regular-webfont.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;

h1 {
    font-family: "moonrocks", Arial, Helvetica, sans-serif;
    font-size: 4rem;
    color: #535274;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

Everything else seems to work well, for example the background images you have configured in other places of your site are applied, so if any issues persist I’d recommend checking the CSS syntax in the places where this occurs, and if you can’t find anything wrong, send a link to where it happens so we can check it out.

[skunian]

@Frank419. Thanks I checked the files and the largest one is 1.6mb everything else is under 1mb.

[skunian]

@ChrisPar. Thanks for looking. I was able to get everything working by moving the styles for the images and fonts out of the css and into the html. I’ll fix that typo now. But sadly, the site doesn’t work when everything is in its “correct” place using a cleaner file structure. Later today I am going to swap everything back to the file structure I want to use and try and resolve the issue.

[skunian]

Ok I have reloaded the original code. The issues are down to background image on games page bggames.png not loading, as far as I can tell the URL is correct, it does work fine locally. The fonts on the Lapis Papyrus Scalpellus are not loading either, also the links seem correct, and they also work fine locally. In Dev tools I can see a 404 error for the fonts (which makes no sense to me) and I see a (failed) net::ERR_INTERNET_DISCONNECTED on the games background (bggames.png).

[skunian]

some more info. I am seeing in devtools the wrong css

If I change it here to the correct

It loads fine. But the css file on the host is correct.

I’ve tried it on multiple devices and from different internet providers. all with the same results to that leads me to believe the issue is with Infinityfree. I could be wrong, but I am stumped.

[Admin]

I had a look, and the issue @ChrisPAR pointed out is still in place.

@ChrisPAR

For My Games, using https://scottkunian.com/CSS/games.css, you haven’t closed the @font-face rule before the h1 rule starts, so the CSS there is broken:

If your CSS file is invalid, browsers will not be able to parse it correctly, and most likely nothing will work.

@skunian

some more info. I am seeing in devtools the wrong css

Which page and CSS file is this exactly? Every page has a unique CSS file. Which is fine, but if you then talk about “the css” of your site, it doesn’t say much.

[skunian]

the one referred to in the previous post is the games.css.

Thats basically what I am saying the css files in the folders don’t match the css being shown in devtools.

this is the css portion of the "Closed @font-face in the css file in my folder it is closed.

in devtools if I manually type in the correct patch (the one from the actual css file) it works.

[skunian]

here is a video showing what I am trying to convey

[Explaining a Website Issue with CSS (loom.com)]

REMOVED

[Admin]

I generally don’t check videos, but I understand the issue.

Please make sure to clear the cache at Cloudflare too. Cloudflare will cache static files, such as CSS. When working on your site, please consider enabling Development Mode in Cloudflare so changes are visible instantly.

[skunian]

Thank you!! I never gave cloudflare a thought. That worked!!