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

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

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 settings.py.

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>
      <div class="col-9">
        <span>Naman Chauhan</span>
      </div>
    </div>
  </div>
</div>

Here’s custom.css:

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

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