Some CSS Styles Not Loading, Others Fine

Hi all - For some reason I am having a VERY strange problem where some of my CSS is working via my static directory but some isn’t

The weird part about it is that when my coworker clones the repo himself it works perfectly fine on his PC

Here is the code itself

Particularly having problems with index.html - I intentionally commented out the tags so that it is only pulling style from styles.css

When I uncomment the tags in index.html everything works and looks perfect, but when I try to pull from my static file the #posts and .post id and class styles are not working properly

I am still a student and this code is part of a course project for CS50W and I haven’t been able to figure out why my CSS isn’t functioning properly

I’d appreciate any help!

Django version 4.1.5
Python 3.11.0

The first thing to do here is to verify that your browser is actually trying to load those files and not re-use files from local cache.

To help diagnosing this beyond that, you would need to post the console output from where you’re running this application (e.g. runserver), showing all the GET requests being issued for that page. You might also want to look at the “network” tab in your browser’s developer tools to see if your browser is even attempting to retrieve those files.

Hi Ken! Thanks for the fast response

[10/Jan/2023 12:30:20] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:21] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:22] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:23] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:23] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:24] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:25] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:26] "GET / HTTP/1.1" 200 2876

The GET requests look to be going smoothly, here is what my network looks like on a refresh (notice cache is disabled, found that advice in another thread but it didn’t help)

Notice that your log is not showing any GETs for the css files.

[10/Jan/2023 11:43:56] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 11:43:56] "GET /static/network/styles.css HTTP/1.1" 304 0
[10/Jan/2023 12:30:19] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:19] "GET /static/network/styles.css HTTP/1.1" 304 0
[10/Jan/2023 12:30:20] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:21] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:22] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:23] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:23] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:24] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:25] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:30:26] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:31:14] "GET / HTTP/1.1" 200 2876
[10/Jan/2023 12:31:14] "GET /static/network/styles.css HTTP/1.1" 200 436

Sorry, I didn’t know exactly what you were interested in seeing but every now and then it does get the actual style.css itself

You could both check the “Sources” tab to verify that the right css file is being loaded, and then check the “Elements” tab - select one of the elements, and then verify what sources it’s using to style that element. (You can also look at the response for styles.css to see what it’s getting as the response from the server.)

Ah! Your comment made me realize I was looking in the wrong place

In the example code that is provided by the lesson, in layout.html the body block is wrapped in a div container with the class name “body” which was causing some sort of problem with my CSS, changing my body CSS to .body to target the particular class actually ended up giving me the exact solution I wanted

Sorry for the bother! I should have been able to spot that myself, I appreciate the help!