Bootstrap CSS - change to default color not working on Mobile - fine on Desktop

user_12789883 0
Viewed 1223

I'm building my first site (www.craigdoesdata.de if you'd like to see this issue in action) using CSS, so apologies if this is obvious or has already been answered (although I have spent a long time searching and couldn't find the answer).

I'm using Bootstrap and have adjusted background-color for .bg-dark in my custom.css file like so:

.bg-dark {
    background-color: #21618c !important;
}

This works on desktop, the Navbar and footer etc change. However on mobile the default bg-dark color (#343a40) appears. When I inspect the elements they are pointing to _background-variant.scss, which still specifies:

.bg-dark {
    background-color: #343a40 !important;
}

I have my custom.css loading last in the header in html, which I thought means it has priority, and this does work on desktop. However, there must be something I'm missing here which means the mobile version isn't using my custom.css stylesheet?

Here is the HTML I've written:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- Add icon library -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/custom.css">

    <title>Craig Does Data | About</title>

  </head>

  <body>

    <!-- Start Navigation -->

      <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top"> 

        <!-- Start Container -->
        <div class="container">

            <!-- Nav Brand -->
            <a class="navbar-brand" href="index.html">
              <img src="img/logo/logo w on blue.png" alt="The logo for Craig Does Data" height="40">
            </a>

            <!-- Start Button -->
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle Navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <!-- End Button -->


            <!-- Start Links -->
            <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto">

                <!-- Home -->
                <li class="nav-item">
                  <a class="nav-link" href=index.html>Home</a>
                </li>

                <!-- Services -->
                <li class="nav-item">
                  <a class="nav-link" href=blog.html>Blog</a>
                </li>

                <!-- Portfolio -->
                <li class="nav-item">
                  <a class="nav-link" href=projects.html>Projects</a>
                </li>

                <!-- About -->
                <li class="nav-item">
                  <a class="nav-link" href=about.html>About</a>
                </li>

                <!-- Contact -->
                <li class="nav-item">
                  <a class="nav-link" href=contact.html>Contact</a>
                </li>

              </ul>
            </div>
            <!-- End Links -->

        </div>
      </nav>
    <!-- End Navigation -->


    <!-- Start Container -->
    <div class="container">


    </div>
    <!-- End Container -->

<br>

    <!-- Footer -->
    <footer class="py-5 bg-dark">  
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Craig Dickson 2020</p>
        <!--Twitter-->
        <div align="center">
        <a href="http://www.twitter.com/craigdoesdata" target="_blank" class="fa fa-twitter"></a>
        <!--GitHub-->
        <a href="https://github.com/thecraigd" target="_blank" class="fa fa-github"></a>
        <!--Medium-->
        <a href="https://medium.com/@thecraigdickson" target="_blank" class="fa fa-medium"></a>
        <!--LinkedIn-->
        <a href="https://www.linkedin.com/in/dicksoncraig/" target="_blank" class="fa fa-linkedin"></a>
      </div>
      </div>

    </footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

and here is custom.css

/* Start Global Styles */

body {
    padding: 1em;
}

@media (min-width: 992px) {
    body{
        padding-top: 56px;
}

.carousel-item {
    height: 65vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.portfolio-item {
    margin-bottom:30px;
}

/* End Global Styles */

/* My colour palette (from htmlcolorcodes.com) */
/* color-4 is my primary, color-3 for hovers */
.color-1 {color: #d2b4de;}
.color-2 {color: #5b2c6f;}

.color-3 {color: #aed6f1;}
.color-4 {color: #21618c;}

.color-5 {color: #76d7c4;}
.color-6 {color: #117864;}


/* Navigation Background Colour */

.bg-dark {
    background-color: #21618c !important;
}

/* Call to Action ('Contact me' on index.html) Button State */

.btn-secondary {
    color: #fff;
    background-color: #21618c;
    border-color: #21618c;
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5499c7;
    border-color: #5499c7;
}

/* Button Hover State */

.btn-primary:hover {
    color: #fff;
    background-color: #5499c7;
    border-color: #5499c7;
}

/* Button normal state */
.btn-primary {
    color: #fff;
    background-color: #21618c;
    border-color: #21618c;
}


/* Nav Link Colour */

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: white;
}
.navbar-dark .navbar-nav .nav-link {
    color: black;
}

Thanks in advance for your help!

bootstrap-4 background-color mobile css html
1 Answers

You have the style inside a media-query. For eg take alook at this which i got while inspecting your site. A media query is being used here

@media (min-width: 992px)
.btn-secondary {
    color: #fff;
    background-color: #21618c;
    border-color: #21618c;
}

So when the device width is below 992px , its taking the default color value rather than your overridden values which you specified in your custom.css.

user_128451420
Related