Forums

Troubleshooting - CSS Updates Not Showing on Site

Hi,

Updates to my CSS file are not uploading on a website.

Here is what I have tried:

  • CTRL-F5 and CTRL-SHIFT-R.
  • Clear browser/cache on desktop and mobile. Restarted browser (Chrome).
  • Running python3.8 manage.py collectstatic (I checked the static folder at the root level of the project directory and it has the changes)
  • Another post asks something about Cloudfare. I'm not doing anything with that unless there is a way to inadvertently set that up within PythonAnywhere that I didn't realize I set up.
  • Checked some PythonAnywhere docs. However, I think my setup is correct (all the static files I originally uploaded work). It's just the updates that aren't populating.
  • This is a Wagtail site, so I've looked at the Django static file doc here: https://help.pythonanywhere.com/pages/DjangoStaticFiles/
  • I looked at the Debugging Static files doc here: https://help.pythonanywhere.com/pages/DebuggingStaticFiles/

I reloaded the site after any change. I usually did this with the refresh button at the top of the file. But I also went to the web page and reloaded there just to make sure.

Any help regarding what else I can try or what I may be doing wrong is appreciated. Thanks!

If you go to the "view source" option in the browser for your site, and then click on the link to the CSS file that doesn't seem to be being updated, do you see the correct version or the old one?

I see the old one.

Steps I followed (Chrome Desktop):

  • Opened webpage
  • Right Click
  • View page source
  • Clicked on the link to the CSS file in the HTML source
  • Checked to see if the CSS class I added was present (it wasn't)

Alright - This may just be a "Chrome is being stubborn" problem.

  • I downloaded Firefox. Saw the updates and the new file.
  • Tried Edge on "computer one" that had a clear cache already. Saw the changes.
  • Tried Edge on "computer two" without a cleared cache. Saw the old file, cleared the cache, and then saw the new file.
  • For Chrome mobile, clearing the history/cache from the browser did not work. I had to go into the phone "App" settings, clear the cache there and then go to Storage > Manage Storage > Click "Clear All Data". That basically reset the Chrome app, but it worked to show the changes.
  • Not sure what to do about Chrome Desktop since I tried clearing the cache and restarting already.

I tested with the updates I tried to make yesterday. I also tried adding a new CSS class today just to make sure I wasn't psyching myself out. All I needed to do with Edge and Firefox was clear the cache and the new changes showed up.

I didn't know about the "View Source" thing. That was helpful in realizing that it was probably a browser issue rather than a file issue since the file setup seemed fine. Thank you!

No problem, glad to hear you worked it out! I sometimes find that if Chrome is being aggressive about caching, you can use the "view source" to get to the CSS file, then shift-reload there to get the new one -- the refreshing the original page will normally (but not always) work OK