'Not all files called with django static appear

I have index.html file in template file and I have js, css, image, files in my static file. I am writing the codes correctly, but the site does not appear properly. Animations, images and text are not in the correct place. (In fact, the logo of the project I used to work with appears in this project. Both are called "logo.png", I think pycharm is confusing the codes. But I opened my project with Visual Studio Code, and the logo of my old project appeared again. Why is this happening? Do I need to delete something?)

settings.py

STATIC_URL = 'static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

index.html

<!DOCTYPE html>
{% load static %}
<html lang="en">
<!-- Basic -->

<head>
  <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" type="image/x-icon">
  <link rel="apple-touch-icon" href="{% static 'images/apple-touch-icon.png' %}">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  <!-- Site CSS -->
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
  <!-- Responsive CSS -->
  <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
  <!-- Custom CSS -->
  <link rel="stylesheet" href="{% static 'css/custom.css' %}">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<body>
    <!-- ALL JS FILES -->
  <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
  <script src="{% static 'js/popper.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <!-- ALL PLUGINS -->
  <script src="{% static 'js/jquery.superslides.min.js' %}"></script>
  <script src="{% static 'js/bootstrap-select.js' %}"></script>
  <script src="{% static 'js/inewstickerjs' %}"></script>
  <script src="{% static 'js/bootsnav.js.' %}"></script>
  <script src="{% static 'js/images-loded.min.js' %}"></script>
  <script src="{% static 'js/isotope.min.js' %}"></script>
  <script src="{% static 'js/owl.carousel.min.js' %}"></script>
  <script src="{% static 'js/baguetteBox.min.js' %}"></script>
  <script src="{% static 'js/form-validator.min.js' %}"></script>
  <script src="{% static 'js/contact-form-script.js' %}"></script>
  <script src="{% static 'js/custom.js' %}"></script>
</body>

</html>

I shared important parts of HTML codes

enter image description here

This is what the site looks like enter image description here

But it should look like this enter image description here

I hope I was able to explain what my problem was. I will be glad if you help me



Solution 1:[1]

The problem seems to be that you might not be reseting the cache. Browsers store caches to make the website run faster, so even though you made changes to the static files(like CSS, js or images), your browser uses the old CSS which is cached. One way to fix this issue during development is to hard refresh, ctrl + shift + r to clear CSS related caches and crtl + F5 for js related files, alternatively you can disable cache in your browser. In development we use versioning to counter this issue. I hope this resolves your issue.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dakshesh Jain