0

I am rendering a template that I am attempting to style with a custom style sheet. The file structure is as follows:

/app
    - __init__.py
    /templates
        - markets.html
        - base.html
    /static
        - custom.css

markets.html looks like this:

{% extends 'base.html' %}

{% block content %}
  <div class="container">
    <div class="row">
      <div class="front-page">

        <div class="col"></div>
        <div class="col-5">Runeberg</div>
        <div class="col">  </div>

      </div>
    </div>
  </div>
{% endblock %}

base.html looks like this:

{% extends 'bootstrap/base.html' %}

{% block styles %}
    {{ super() }}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css') }}">
{% endblock %}

And finally, custom.css looks like this:

.front-page {
  margin-top: 25%;
}

I wrote this code by following this example here. The problem is, the style (front-page) is not being applied.

Logicman
  • 129
  • 2
  • 14

2 Answers2

0

You are not linking to the css in your html file correctly? Does it work when hardlinking it?

Steven Pincé
  • 51
  • 1
  • 1
  • 6
  • Hardlinking it did not work. One thing I did notice was when I checked the source using Chrome's dev tools, custom.css shows up as empty (seen here: https://i.imgur.com/rnTytho.png). – Logicman Aug 22 '18 at 18:14
0

Found the answer to my question here. Chrome's cache didn't reflect the new CSS changes, a hard refresh (shift + f5) did the trick.

Logicman
  • 129
  • 2
  • 14