Solution 1 :

just remove / from the css link tag
and make sure you include above in template
{% load static %}

<link rel="stylesheet" href="{% static 'custom.css' %}" />

Problem :

I have gone through several questions and solutions on StackOverflow but it doesn’t seem to work for me.
Although, p-5 is working fine for padding but this works for all devices. I want specific CSS for mobile for padding. I tried adding custom CSS and added custom class infocards in the cards div but it’s not working. Also, I added !important to override any equal weight styling on bootstrap with my custom one.

Note: I am building my page using Django and files are static. They have been properly configured in

My index.html:

<link rel="stylesheet" href="{% static '/custom.css' %}">
<div class="col-md-6">
  <div class="contacts card p-5 infocards">
    <h3 class="mb-4">Contact Info</h3>
    <div class="row mb-4">
      <div class="col-1">
        <i class="fa fa-user"></i>
      <div class="col-9">
        <span>Naman Chauhan</span>

Here’s custom.css:

/*for mobile*/
.infocards  {
  padding: 10px !important;

/*for desktop*/
@media only screen and (min-width: 768px)  {


Comment posted by Pavan kumar

Is this helpful for you

Comment posted by Naman Chauhan

I have already tried this but it’s not working. Updating same in the question

Comment posted by Pavan kumar

Are you added static URL pattern in

Comment posted by Naman Chauhan

Sorry to reply you late but the problem has been resolved now. Thanks for the efforts! It seems like the stylings are not updated on the localhost while in development but when I push the code to production, it works. Weird?