Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Python Django Basics Django Templates Static Assets

Diallo West
Diallo West
15,069 Points

My css isn't being applied when I load the page. It worked once yesterday but won't work today.

I don't understand why it's not applying the css to the website.

Diallo West
Diallo West
15,069 Points

"""python {% load static from staticfiles %}

<!doctype html> <html> <head> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="{% static 'css/layout.css' %}"> </head> <body> <div class="site-container"> {% block content %}{% endblock %} </div> </body> </html> """

Ryan S
Ryan S
27,276 Points

Hi Diallo,

Are you using workspaces? If so it would be helpful if you link to a snapshot of your workspace. There a lot of moving parts in Django so we would need to see it in context in order to help you debug further. If you are developing locally then it would be useful to see settings.py, your directory structure, and even the layout.css file itself. I don't see anything wrong with your template.

Also, to format your code properly you need to surround it with 3 back ticks, not quotations. (Found in the upper left corner of your keyboard, sharing the same key as ~).

2 Answers

Ryan S
Ryan S
27,276 Points

Hi Diallo,

I forked your workspace and it is working fine for me. The only thing that should be happening at this stage is setting a width for your "site-container" div, and centering it. The <h1> element should move slightly to the right as a result.

One thing to note though, is that because the container div is set to a fixed width, if your browser window width is sufficiently small, then there will be no noticeable change in the <h1> text. The div width is set at 68em (1088px), so if your browser width is less than that, it will take up 100% of the window and the "Welcome!" text will still hug the left side of the screen with no margin.

Just to be sure, try adding a property to the very bottom of the css file that targets the <h1> element.

Something like:

h1 {
  color: green;
}

See if that does anything.

Diallo West
Diallo West
15,069 Points

That worked. Thank you for taking the time to explain what was going on in the background. You're correct, when I expanded the browser page I could see the change, yet not full size it moves to the left.

Ryan S
Ryan S
27,276 Points

No problem. Glad it is working.

Diallo West
Diallo West
15,069 Points

Thanks for taking a look at it. I just made a snapshot of my workspace. https://w.trhou.se/turc72r8h2