Not sure if HTML is using CSS file because changes made to CSS file do not show up on webpage. What do I do?

Question

I am tasked with making an alert on the "Beta: Empty Bedspaces" and "Beta: Hall Roster With Empty Beds" reports. I have to put the alert in at the top of the page. I want it to be centered and not take up the whole width of the page.

Putting in inline styles work, but I am not sure if it is reading the CSS file. Considering this is for a job, I can't really move the file itself around, and I am 99% sure it's in a good file location as that's where my coworkers/boss already has it.

HTML code:

{% extends 'reports_templates/base.html' %}
{% load static from staticfiles %}

{% block extra-head %}
<link rel="stylesheet" type="text/css" href="{% static 'datatables/media/css/jquery.dataTables.min.css' %}">
<link rel='stylesheet' type='text/css' href="{% static 'css/empty_bedspaces.css' %}">
{% endblock %}

{% block title %}
<title>Empty Bed Spaces</title>
{% endblock %}

{% block content %}
<div class="alert alert-danger" id="alert">
  <strong>Note:</strong> Some of the rooms below may not be available for assignment.
</div>

CSS code:

.container div {
  margin: 1%;
}

#specific-table tr th {
  border-bottom: 1px solid #111;
}

th.title {
  text-align: center !important;
}

.alert-danger {
    font-size: 72px;
}

If I do:

<div class="alert alert-danger" style="margin: 45%" >
  <strong>Note:</strong> Some of the rooms below may not be available for assignment.
</div>

It makes it take up an adequate amount of page space. Also, keep in mind this is not nearly all the code. I didn't want to paste a huge file.

Here is a picture of how it looks so far with just the alert div.

Try to clear your cache and then reload the page and see if it takes effect — GrumpyCrouton
– GrumpyCrouton, Commented Apr 15, 2019 at 17:53
Right-Click "inspect page" in your browser and have a look under section "network" if the css file is loaded. — nologin
– nologin, Commented Apr 15, 2019 at 17:55
@HelanaBrock Search google "[insert browser here] clear cache" — GrumpyCrouton
– GrumpyCrouton, Commented Apr 15, 2019 at 18:08

Triston Wasik · Accepted Answer · 2019-04-15 18:21:49Z

1

Try clearing your cache, most browsers: CTRL+SHIFT+R. While developing, I would also recommend disabling caching locally in your development panel. In Chrome it will be F12 > Network Tab > Check Disable Cache. You may need to restart your browser to force the changes as well.

answered Apr 15, 2019 at 18:21

Triston Wasik

563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nosnetrom · Accepted Answer · 2019-04-15 18:19:22Z

0

If you are using Bootstrap, you could give it class="col-md-8 col-md-push-2 text-center".

answered Apr 15, 2019 at 18:19

Nosnetrom

1719 bronze badges

Collectives™ on Stack Overflow

Not sure if HTML is using CSS file because changes made to CSS file do not show up on webpage. What do I do?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related