Search code examples
cssbackground-imagebreakpointsdisplay

Issue with breakpoint and background-image

So I have a div containing a logo, a version for mobile and desktop that switches at each breakpoint. basically I have display: none; set in css appropriately so they display at the proper breakpoint. Everything worked great until I added a background-image to my .containerLogoDesk and now this container remains even at mobile breakpoint which I don't want. Not sure why this is happening and how to prevent it! If I remove the background image the @media screen and (min-width: 730px) works as it should.

Any ideas? Thank you.

example

/* */

@media screen and (min-width: 730px) {
  .containerLogoMobi,
  .navbar-brand {
    display: none;
  }
}

@media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}

.logoDesktop {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.logoMobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.navbar-nav {
  margin-right: auto;
  margin-left: auto;
}

.nav-link,
.navbar-brand {
  font-family: Alegreya Sans SC;
  font-size: 20px;
}

.navbar {
  background-color: rgba(47, 69, 111, .7) !important;
}

.containerLogoDesk {
  background-image: url(../images/ex.png);
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
}
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Menu</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Gallery</a>
        <a class="nav-link" href="#">Contact</a>
      </div>
    </div>
  </div>
</nav>
<div class="containerLogoDesk">
  <!-- D E S K T O P   L O G O -->
  <img src="images/test3.gif" class="logoDesktop">
</div>
<div class="containerLogoMobi">
  <!-- M O B I L E   L O G O -->
  <img src="images/logoMobileFr.gif" class="logoMobile">
</div>

Solution

  • The problem is the placement of your media queries. CSS still cascades regardless if there is a media query, so in your code, you have this at the top:

    @media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}

    But then, at the very bottom, you are setting that element to block. What you need to do is move the @media queries AFTER the properties you want changed.

    .logoDesktop {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.logoMobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.navbar-nav {
  margin-right: auto;
  margin-left: auto;
}

.nav-link,
.navbar-brand {
  font-family: Alegreya Sans SC;
  font-size: 20px;
}

.navbar {
  background-color: rgba(47, 69, 111, .7) !important;
}

.containerLogoDesk {
  background-image: url(../images/ex.png);
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
}

@media screen and (min-width: 730px) {
  .containerLogoMobi,
  .navbar-brand {
    display: none;
  }
}

@media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Menu</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Gallery</a>
        <a class="nav-link" href="#">Contact</a>
      </div>
    </div>
  </div>
</nav>
<div class="containerLogoDesk">
  <!-- D E S K T O P   L O G O -->
  <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" class="logoDesktop">
</div>
<div class="containerLogoMobi">
  <!-- M O B I L E   L O G O -->
  <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" class="logoMobile">
</div>