0

I'm using one of the Bootstrap examples (the Dashboard). I'm deploying the site using Python Flask.

The style.css file is being called successfully using Flask. 

<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename ='bootstrap.min.css') }}" rel="stylesheet">

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{ url_for('static', filename ='ie10-viewport-bug-workaround.css') }}" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename ='style.css') }}" rel="stylesheet">

Everything works except when I add my own CSS selectors to the file and try to call them in HTML.

For example, I've added

#profile_picture {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  -webkit-border-radius: 150px;
  -moz-border-radius: 150px;
}
.flash_msg {
  background: #93ff9e;
  font-size: large;
  font-weight: bold;
}

to the style.css file, and

<img id="profile_picture" src="{{user[1]}}">

<li class="flask_msg">{{ message }}</li>

to the html, yet nothing happens.

Here is the link to the full style.css file.

Here is one of the HTML templates.

Here is the rest of the repo.

JTP709
  • 130
  • 2
  • 16

2 Answers2

0

Your CSS is looking for an img child of #profile_picture on your github.

Luis Gutierrez
  • 472
  • 4
  • 6
0

This was a caching issues. Clearing the browser cache allowed it to work. However, I believe this post may provide a better solution: Flask css not updating

JTP709
  • 130
  • 2
  • 16