# Static files not working properly

**URL:** <https://forum.djangoproject.com/t/static-files-not-working-properly/34360>\
**Category:** Templates & Frontend\
**Created:** [August 31, 2024, 10:44am UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360 "2024-08-31T10:44:54Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 10:44am UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/1 "2024-08-31T10:44:54Z")

</div>

I am trying to build a project using django. I downloaded a css template to try it .I have tried everything but my css files and js files are not working properly.  
My settings is:

```auto
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
    BASE_DIR / "static",

    ]

HTML page:
link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="{% static 'lib/flaticon/font/flaticon.css' %}" rel="stylesheet">
        <link href="{% static '/animate/animate.min.css" rel="stylesheet' %}">
        <link href="{% static 'lib/owlcarousel/assets/owl.carousel.min.css' %}" rel="stylesheet">

        <!-- Template Stylesheet -->
        <link href="/static/css/style.css" rel="stylesheet">
 
<!-- JavaScript Libraries -->
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
        <script src="lib/easing/easing.min.js"></script>
        <script src="lib/owlcarousel/owl.carousel.min.js"></script>
        <script src="lib/waypoints/waypoints.min.js"></script>
        <script src="lib/counterup/counterup.min.js"></script>
        <script src="lib/parallax/parallax.min.js"></script>
        
        <!-- Contact Javascript File -->
        <script src="mail/jqBootstrapValidation.min.js"></script>
        <script src="mail/contact.js"></script>

        <!-- Template Javascript -->
        <script src="/static/js/main.js"></script>

```

---

<div class="post-metadata">

**Author:** ![onyeibo](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/onyeibo/32/11494_2.png) [@onyeibo](https://forum.djangoproject.com/u/onyeibo)\
**Post date:** [August 31, 2024, 11:06am UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/2 "2024-08-31T11:06:31Z")

</div>

Is this running on a development machine (`./manage.py runserver`) or is this deployed `(apache/nginx)` ?

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 31, 2024, 11:42am UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/3 "2024-08-31T11:42:04Z")

</div>

Welcome @Joana-Jopson !

First, a side note: When posting code here, use lines of three backticks - ` to fence off code, not “\> blockquote”. This means you’ll have a line of ```, then your code, then another line of ```. (I’ve taken the liberty of modifying your original post for you to fix this.)

> [@Joana-Jopson](#):
>
> I have tried everything but my css files and js files are not working properly.

Can you be more specific about _how_ they are not working? Are you seeing the requests for the files being issued? Are those requests getting a 404? Is it _all_ files, or just some?

Please describe where these files exist within your directory structure. Are they in a subdirectory in your project base? Or are they within a subdirectory in an app?

Beyond that there are a couple things it see right off-hand.

First:

> [@Joana-Jopson](#):
>
> `<link href="{% static '/animate/animate.min.css" rel="stylesheet' %}">`

The `rel="stylesheet' ` doesn’t belong inside the static tag. (Notice how you have the others.) Your quotes (' and ") are also mixed up here.  
You generally want to have the `type="text/css"` attribute in those links as well.

You don’t have your JavaScript libraries using the static tag:

Example:

> [@Joana-Jopson](#):
>
> ```auto
> <script src="lib/easing/easing.min.js"></script>
> 
> ```

should probably be:  
`<script type="text/javascript" src="{% static 'lib/easing/easing.min.js' %}" />`

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 1:24pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/4 "2024-08-31T13:24:37Z")

</div>

yes py manage.py runserver

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 1:44pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/5 "2024-08-31T13:44:07Z")

</div>

Oh thank you for replying.  
Yes its 404 error.I have just started so right now only index page.  
The file structure is:

```auto
-projectname
 -applicationname
  -templates
  -static
    -css
    -js
    -lib
    -img

```

 ![pic](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/c/f/cfb0f766ecd4be42fd84fd0fb2d833deb861dcc5.png)

I had downloaded the css from [HELPZ Free Website Template | Free CSS Templates | Free CSS](https://www.free-css.com/free-css-templates/page270/helpz)  
the carousel’s css and js dont work. i tried everything i added mime type but it didnt change anything.The top part not shown if i change

```auto
 <script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>

```

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 31, 2024, 2:52pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/6 "2024-08-31T14:52:07Z")

</div>

Based upon your `STATICFILES_DIRS` setting, that `static` directory should be in the project directory, not the app directory.

If moving the directory doesn’t help, please show the html that was rendered in the page (not the template) and the http requests from the `runserver` console. (I’m assuming you’re doing this in a development environment.)

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 4:15pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/7 "2024-08-31T16:15:45Z")

</div>

I moved the directory to projectname directory and i made the modification you have told earlier about adding:

```auto
<script type="text/javascript" src="{% static 'lib/easing/easing.min.js' %}" />

```

Now it shows as

 ![pic2](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/e/0/e0ff2359c9640b0e639f79602bc36ffe1232b9d8.jpeg)

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 4:20pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/10 "2024-08-31T16:20:39Z")

</div>

The http request while running is shown below in the terminal:

 ![pic4](https://us1.discourse-cdn.com/flex026/uploads/djangoproject/original/3X/4/d/4dca20e98bd1a5e65ebf0c7a4c6f3aca63cb5aa8.png)

I am unable to understand why the top 3 images overlap with each other and the information below moves up.I checked the css code but it seems fine. I changed all script src to how you had suggessted. Still the error persists

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 31, 2024, 4:25pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/11 "2024-08-31T16:25:23Z")

</div>

I can see right offhand that neither of the urls starting with `/mail/` are right, in that they don’t begin with `/static/`.

It looks like you have `static` duplicated in the request for `/static/static/js/main.js`.

Please identify the complete directory path where `animate.min.css` resides.

Also, please do not post images when not necessary. For things like the console output, copy/paste the text into the body of your post between lines of three backticks. (Note, you need to use the backtick - `, not the apostrophe - ', and the lines of ``` must be lines by themselves, not part of any other line. Also, if you have just one line or a portion of a line, you can use a single backtick before and after the string.)

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 5:34pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/13 "2024-08-31T17:34:24Z")

</div>

If i were to remove the /static/ in main.js the website shows like its loading and no content will be seen. For mail it resides in the static folder in project directory.

```auto
        <script type="text/javascript" src="{% static '/mail/jqBootstrapValidation.min.js' %}"></script>
        <script type="text/javascript" src="{% static '/mail/contact.js' %}"></script>

        <!-- Template Javascript -->
        <script type="text/javascript" src="/static/js/main.js"></script>

```

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [August 31, 2024, 5:37pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/14 "2024-08-31T17:37:50Z")

</div>

Hi, I made changes like you had said to check the path. Now the developer and the terminal does not show any error. But the website does not show the navigation bar images and the scroll images.

---

<div class="post-metadata">

**Author:** ![KenWhitesell](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/kenwhitesell/32/280_2.png) [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)\
**Post date:** [August 31, 2024, 6:03pm UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/15 "2024-08-31T18:03:40Z")

</div>

Again, please show the output from these requests from your runserver console.

> [@Joana-Jopson](#):
>
> `<script type="text/javascript" src="/static/js/main.js"></script>`

You are not using the `{% static ` tag here.

---

<div class="post-metadata">

**Author:** ![Joana-Jopson](https://sea2.discourse-cdn.com/flex026/user_avatar/forum.djangoproject.com/joana-jopson/32/23621_2.png) [@Joana-Jopson](https://forum.djangoproject.com/u/Joana-Jopson)\
**Post date:** [September 7, 2024, 9:47am UTC](https://forum.djangoproject.com/t/static-files-not-working-properly/34360/17 "2024-09-07T09:47:12Z")

</div>

Thank You it started working.