CSS does not apply properly when deployed on heroku

Question

The CSS looks fine on local deployment but does not work after I deploy on heroku. I have no idea why as the app seems to build fine. I have tried reordering the CSS files in the layout.html and have also inspected the page elements. The CSS is partially taken from an online source, so I don't completely understand it. Is there potentially something wrong there?

Edit: Upon looking at heroku logs, there are the following (potential) errors, but still builds succesfully:

2020-06-27T05:24:16.000000+00:00 app[api]: Build started by user andychen2325@gmail.com
2020-06-27T05:24:42.966827+00:00 heroku[web.1]: Restarting
2020-06-27T05:24:42.997174+00:00 heroku[web.1]: State changed from up to starting
2020-06-27T05:24:42.747602+00:00 app[api]: Deploy 8fdfaf0d by user andychen2325@gmail.com
2020-06-27T05:24:42.747602+00:00 app[api]: Release v20 created by user andychen2325@gmail.com
2020-06-27T05:24:43.836147+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2020-06-27T05:24:43.868537+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [10] [INFO] Worker exiting (pid: 10)
2020-06-27T05:24:43.868657+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [4] [INFO] Handling signal: term
2020-06-27T05:24:43.869380+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [11] [INFO] Worker exiting (pid: 11)
2020-06-27T05:24:43.969359+00:00 app[web.1]: [2020-06-27 05:24:43 +0000] [4] [INFO] Shutting down: Master
2020-06-27T05:24:44.106016+00:00 heroku[web.1]: Process exited with status 0
2020-06-27T05:24:46.880088+00:00 heroku[web.1]: Starting process with command `gunicorn app:app`
2020-06-27T05:24:49.214390+00:00 heroku[web.1]: State changed from starting to up
2020-06-27T05:24:49.020261+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Starting gunicorn 20.0.4
2020-06-27T05:24:49.021350+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Listening at: http://0.0.0.0:42739 (4)
2020-06-27T05:24:49.021497+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [4] [INFO] Using worker: sync
2020-06-27T05:24:49.029508+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [10] [INFO] Booting worker with pid: 10
2020-06-27T05:24:49.116908+00:00 app[web.1]: [2020-06-27 05:24:49 +0000] [11] [INFO] Booting worker with pid: 11
2020-06-27T05:24:54.000000+00:00 app[api]: Build succeeded

CSS file:

/* @extend display-flex; */
display-flex, .display-flex, .display-flex-center, .signup-content, .signin-content, .social-login, .socials {
    display: flex;
    display: -webkit-flex; }
  
  /* @extend list-type-ulli; */
  list-type-ulli, .socials {
    list-style-type: none;
    margin: 0;
    padding: 0; }
  
  p {
    margin-bottom: 0px;
    font-size: 15px;
    color: #777; }
  
  h2 {
    line-height: 1.66;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #222;
    font-family: Poppins;
    font-size: 36px; }
  
  .main {
    background: #f8f8f8;
    padding: 150px 0; }
  
  .clear {
    clear: both; }
  
  body {
    font-size: 13px;
    line-height: 1.8;
    color: #222;
    background: #f8f8f8;
    font-weight: 400;
    font-family: Poppins; }
  
  .container {
    width: 900px;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    -ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    -ms-border-radius: 20px; }
  
  .display-flex {
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
    -ms-align-items: center; }
  
  .display-flex-center {
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
    -ms-align-items: center; }
  
  .position-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); }
  
  .signup {
    margin-bottom: 150px; }
  
  .signup-content {
    padding: 75px 0; }
  
  .signup-form, .signup-image, .signin-form, .signin-image {
    width: 50%;
    overflow: hidden; }
  
  .signup-image {
    margin: 0 55px; }
  
  .form-title {
    margin-bottom: 33px; }
  
  .signup-image {
    margin-top: 45px; }
  
  .form-submit {
    display: inline-block;
    background: #6dabe4;
    color: #fff;
    border-bottom: none;
    width: auto;
    padding: 15px 39px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    margin-top: 25px;
    cursor: pointer; }
    .form-submit:hover {
      background: #4292dc; }
  
  #signin {
    margin-top: 16px; }
  
  .signup-image-link {
    font-size: 14px;
    color: #222;
    display: block;
    text-align: center; }
  
  .term-service {
    font-size: 13px;
    color: #222; }
  
  .signup-form {
    margin-left: 75px;
    margin-right: 75px;
    padding-left: 34px; }
  
  .register-form {
    width: 100%; }
  
  .form-group {
    position: relative;
    margin-bottom: 25px;
    overflow: hidden; }
    .form-group:last-child {
      margin-bottom: 0px; }
  
  .agree-term {
    display: inline-block;
    width: auto; }
  
  label {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #222; }
  
  .label-agree-term {
    position: relative;
    top: 0%;
    transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0); }
  
  .signin-content {
    padding-top: 67px;
    padding-bottom: 87px; }

  .signin-form {
    margin-right: 90px;
    margin-left: 80px; }
  
  .signin-image {
    margin-left: 110px;
    margin-right: 20px;
    margin-top: 10px; }
  
  @media screen and (max-width: 1200px) {
    .container {
      width: calc( 100% - 30px);
      max-width: 100%; } }
  @media screen and (min-width: 1024px) {
    .container {
      max-width: 1200px; } }
  @media screen and (max-width: 768px) {
    .signup-content, .signin-content {
      flex-direction: column;
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      -o-flex-direction: column;
      -ms-flex-direction: column;
      justify-content: center;
      -moz-justify-content: center;
      -webkit-justify-content: center;
      -o-justify-content: center;
      -ms-justify-content: center; }
  
    .signup-form {
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 0px;
      /* box-sizing: border-box; */
      padding: 0 30px; }
  
    .signin-image {
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 50px;
      order: 2;
      -moz-order: 2;
      -webkit-order: 2;
      -o-order: 2;
      -ms-order: 2; }
  
    .signup-form, .signup-image, .signin-form, .signin-image {
      width: auto; }
  
    .form-button {
      text-align: center; }
  
    .signin-form {
      order: 1;
      -moz-order: 1;
      -webkit-order: 1;
      -o-order: 1;
      -ms-order: 1;
      margin-right: 0px;
      margin-left: 0px;
      padding: 0 30px; }
  
    .form-title {
      text-align: center; } }

html file:

{% extends "layout.html" %}

{% block title %}
    Login
{% endblock %}

{% block content %}
<div class="main">
<!-- Sing in  Form -->
<section class="sign-in">
    <div class="container">
        <div class="signin-content">
            <div class="signin-image">
                <figure><img src="../static/loginimg.png" alt=""></figure>
            </div>

            <div class="signin-form">
                <h2 class="form-title">Login or <a href="/register">Register</a></h2>
                <form method="POST" class="register-form" id="login-form">
                    <div class="form-group">
                        <label for="user"><i class="fa fa-user"></i></label>
                        <input type="text" name="user" id="your_name" placeholder="Username or Email"/>
                    </div>
                    <div class="form-group">
                        <label for="pass"><i class="fa fa-lock"></i></label>
                        <input type="password" name="pass" id="your_pass" placeholder="Password"/>
                    </div>
                    <div class="form-group form-button">
                        <input type="submit" name="signin" id="signin" class="form-submit" value="Log in"/>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>


</div>
{% endblock %}

Answer 1

You didn't include your layout.html in the question, which probably is where your problem exists: How are you including the stylesheets?

A clue is in this line though:

<img src="../static/loginimg.png" alt="">

Providing the path like this is incorect and probably leads to this issue. The above should use the url_for function, essentially:

<img src="{{ url_for('static', filename='loginimg.png') }}" alt="">

Make sure any static links in your code are provided in this manner. Specifically the stylesheet includes (aka <link href="..."> in the <head> element of your HTML).

This is also easy to diagnose via your Browser Dev Tools (on the Network tab). Load your broken Heroku app, and you'll probably see 404 errors for any static includes which need to be fixed as mentioned.