Django some css not working in production

Question

I have a django app. In production I ran collectstatic and all good except a small piece of css. This css thing is a question mark which on hover shows some tips about the app feature. This also could be a nginx configuration issue maybe. But again, just this piece of css does not work properly.

html

<div class="help-tip">
 <p> 
    some text
 </p>
</div>

css

/*-------------------------
    Inline help tip
--------------------------*/
.help-tip-wrapper{
  padding-top: 15px;
  padding-left: 5px;
}

.help-tip{
    text-align: center;
    background-color: #BCDBEA;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 26px;
    cursor: default;
}

.help-tip:before{
    content:'?';
    font-weight: bold;
    color:#fff;
}

.help-tip:hover p{
    display:block;

    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{
    display: none;
    background-color: #1E2021;
    padding: 20px;
    width: 300px;
    border-radius: 3px;
    right: -4px;
    color: #FFF;
  font-weight: normal;
    font-size: 10px;
  z-index: 100;
    line-height: 1.4;
  position: relative;
}

.help-tip p:before{
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#1E2021;
    right:10px;
    top:-12px;
}

.help-tip p:after{
    width:100%;
    height:40px;
    content:'';
    top:-40px;
    left:0;
}

settings.py

STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'

All css working fine except this one.

no! load your static CSS location in template like {% load static %} and <link rel="stylesheet" type="text/css" href="{% static 'css/abc.css' %}"> also can you please show us your whole template file for regarding help tips — mhhabib
– mhhabib, Commented Aug 28, 2021 at 13:17
What do you mean by "not working"? Did it not get found by collectstatic, does it not get served, is it being loaded but the actual CSS styles are not being applied? — Iain Shelvington
– Iain Shelvington, Commented Aug 28, 2021 at 13:18
just this piece of css does not work properly - Does that mean other CSS code work fine ? — Ram
– Ram, Commented Aug 28, 2021 at 13:45

user14880125 · Accepted Answer · 2021-08-28 13:29:35Z

1

Your settings.py file is wrong.

It should look like this

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
STATIC_DIRS = [
     os.path.join(BASE_DIR, 'static')
]

Also you have to now update your nginx or apach2 server with above change 'staticfiles'

When you run collectstatic command, it will now save your bundle in staticfiles dir and it will be served when your DEBUG=False . If your debug=True, then it will server from static folder

answered Aug 28, 2021 at 13:29

user14880125

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

2 Comments

kakakakakakakk Over a year ago

I have updated everything and still not working

kakakakakakakk Over a year ago

when I look into the css loaded from browser, there is the file but some of the css content is not there

Dharman · Accepted Answer · 2021-08-28 13:37:57Z

0

You have not used the url mapping for "collectstatic". So in you settings, use this kind of mapping. (can edit as you wish,except the keyword(varaible name))

STATIC_URL = '/static/'
STATICFILES_DIRS=[BASE_DIR / 'static']
STATIC_ROOT= BASE_DIR / 'staticfiles'

After this, run the 'collectstatic'. You will get all the css, in this in production, in this specific url mapped file .

edited Aug 28, 2021 at 13:37

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Aug 28, 2021 at 13:32

Sidharth Baiju

446 bronze badges

Collectives™ on Stack Overflow

Django some css not working in production

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related