I have been scouring through countless questions and solutions on StackOverflow, but nothing seems to be working for me. While p-5 is doing its job just fine for padding, it applies to all devices. I am in need of specific CSS for mobile devices when it comes to padding. I attempted to add custom CSS by including a custom class infocards within the cards div, but unfortunately, it's not producing the desired outcome. In an attempt to override any competing styling from Bootstrap with my own customized style, I even included the !important declaration.
Note: The page I am constructing is built using Django, and the files are static. These files have been appropriately set up in settings.py.
Below is a snippet from 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>
Take a look at my custom.css:
/* Specific styles for mobile */
.infocards {
padding: 10px !important;
}
/* Placeholder for desktop styles */
@media only screen and (min-width: 768px) {
}