This is my first website project, you can check it out at www.craigdoesdata.de to see the issue I'm facing with CSS. I apologize if this question seems obvious or if it has already been addressed (I have spent a considerable amount of time searching for a solution but couldn't find one).
I am using Bootstrap and have made changes to the background-color for .bg-dark in my custom.css file as follows:
.bg-dark {
background-color: #21618c !important;
}
On desktop, this change works perfectly. The Navbar and footer reflect the updated color. However, on mobile devices, the default bg-dark color (#343a40) continues to appear. When inspecting the elements, they are referring to _background-variant.scss, which still specifies the old background color:
.bg-dark {
background-color: #343a40 !important;
}
I have ensured that my custom.css loads last in the header of the HTML, assuming it would take precedence, and it does work on desktop. But there seems to be something missing that prevents the mobile version from utilizing my custom.css stylesheet.
Below is the HTML code snippet:
And here is the content of custom.css:
Thank you in advance for your assistance!