# CSS not working when in a subfolder

**URL:** <https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388>\
**Category:** Hosting Support\
**Created:** [March 21, 2024, 9:03pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388 "2024-03-21T21:03:38Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 21, 2024, 9:03pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/1 "2024-03-21T21:03:38Z")

</div>

I’m having an issue on my site [scottkunian.com](http://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”

---

<div class="post-metadata">

**Author:** ![anon42008019](https://forum.infinityfree.com/letter_avatar/anon42008019/32/5_5575768a8748004e209b776fc1b2916d.png) [@anon42008019](https://forum.infinityfree.com/u/anon42008019)\
**Post date:** [March 21, 2024, 9:21pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/2 "2024-03-21T21:21:45Z")

</div>

> [@skunian](#):
>
> “css/name.css”

Change it to `/css/name.css`

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 21, 2024, 9:35pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/3 "2024-03-21T21:35:16Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Meishin](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/meishin/32/59902_2.png) [@Meishin](https://forum.infinityfree.com/u/Meishin)\
**Post date:** [March 22, 2024, 9:49am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/4 "2024-03-22T09:49:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 10:05am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/5 "2024-03-22T10:05:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Meishin](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/meishin/32/59902_2.png) [@Meishin](https://forum.infinityfree.com/u/Meishin)\
**Post date:** [March 22, 2024, 10:12am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/6 "2024-03-22T10:12:46Z")

</div>

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](https://forum.infinityfree.com/t/what-is-the-file-upload-size-limit/49308):
>
> 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…

---

<div class="post-metadata">

**Author:** ![ChrisPAR](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/chrispar/32/8743_2.png) [@ChrisPAR](https://forum.infinityfree.com/u/ChrisPAR)\
**Post date:** [March 22, 2024, 10:18am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/7 "2024-03-22T10:18:14Z")

</div>

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

For [My Games](https://scottkunian.com/games.html), using [https://scottkunian.com/CSS/games.css](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:

```css
@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.

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 10:39am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/8 "2024-03-22T10:39:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 10:42am UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/9 "2024-03-22T10:42:05Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 12:44pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/10 "2024-03-22T12:44:30Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 1:25pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/11 "2024-03-22T13:25:48Z")

</div>

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

![image](https://forum-cdn.infinityfree.net/original/3X/9/a/9ab1c1a84c8b53f65b6e3684994c7f11c3a32bc2.png)

If I change it here to the correct

![image](https://forum-cdn.infinityfree.net/original/3X/5/5/551d726393bccbd89883fbf9130522a803437dd9.png)

It loads fine. But the css file on the host is correct.  
 ![image](https://forum-cdn.infinityfree.net/original/3X/7/c/7c7af42ac7d52c30d3d12cee12de577fc5cf95dd.png)

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.

---

<div class="post-metadata">

**Author:** ![Admin](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/admin/32/36437_2.png) [@Admin](https://forum.infinityfree.com/u/Admin)\
**Post date:** [March 22, 2024, 2:25pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/12 "2024-03-22T14:25:35Z")

</div>

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

> [@ChrisPAR](#):
>
> For [My Games](https://scottkunian.com/games.html), using [https://scottkunian.com/CSS/games.css](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.

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 2:42pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/13 "2024-03-22T14:42:20Z")

</div>

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.

![image](https://forum-cdn.infinityfree.net/original/3X/1/9/19adcba5ec4b9720646a88e55e1a4891252ef274.png)

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

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 3:01pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/14 "2024-03-22T15:01:20Z")

</div>

here is a video showing what I am trying to convey

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

**REMOVED**

---

<div class="post-metadata">

**Author:** ![Admin](https://forum.infinityfree.com/user_avatar/forum.infinityfree.com/admin/32/36437_2.png) [@Admin](https://forum.infinityfree.com/u/Admin)\
**Post date:** [March 22, 2024, 3:06pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/15 "2024-03-22T15:06:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![skunian](https://forum.infinityfree.com/letter_avatar/skunian/32/5_5575768a8748004e209b776fc1b2916d.png) [@skunian](https://forum.infinityfree.com/u/skunian)\
**Post date:** [March 22, 2024, 3:16pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/16 "2024-03-22T15:16:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://infinityfree-forum-uploads.s3.dualstack.eu-central-1.amazonaws.com/original/3X/b/0/b024fd3fa88bae093c9576e55c2c94e33f890206.svg) [@system](https://forum.infinityfree.com/u/system)\
**Post date:** [March 29, 2024, 3:17pm UTC](https://forum.infinityfree.com/t/css-not-working-when-in-a-subfolder/91388/17 "2024-03-29T15:17:16Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
