Media query does not change banner image's display property for mobile view

user_14943394 0
Viewed 156

So on my mobile view, I want the banner to show my mobile image and I was alternating the display properties in the media query. This is my first question on Stack, sorry if I omitted something.

<div class="row">
  <div class="image-container">

    <img class="desktopimage" src="../resources/images/indeximage.jpg" alt="">
    <img class="mobileimage" src="../resources/images/mobileindeximage.jpg" alt="">

  </div>



  <div class="intro-container">
    <div class="intro">
      <h2>Work hard today, Be Lean tomorrow.</h2>

      <h4></h4>

      <p></p>

    </div>
  </div>
</div>
Then here I have the scss for it, the DevTools in the browser crosses off the **display:block** property in the media query. 
        .banner {
          display: flex;
          width: 100%;
          flex-direction: column;
          position: relative;

          .row {
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;

            .image-container {
              min-width: 100%;

              .desktopimage {
                width: 100%;
                height: 95vh;
              }

              .mobileimage {
                display: none;
                width: 100%;
                height: 100vh;
              }
            }

            .intro-container {
              display: flex;
              justify-content: center;
              background-color: rgb(255, 255, 255);
              position: absolute;
              border-radius: 20px;
              opacity: 0.9;
              right: 1rem;

              .intro {
                text-align: center;
                opacity: 0.9;
                padding: 1em;
                color: rgb(7, 6, 6);

                h2 {
                  font-family: 'Permanent Marker', cursive;
                  color: rgb(0, 0, 0);
                }
              }
            }
          }
        }
        @media (max-width: 900px) {
          .desktopimage {
            display: none;
          }

          .mobileimage {
            display: block;
          }
        }
media-queries sass css-selectors css html
1 Answers

You need to add .banner .row .image-container in the selector (i.e. the elements into which your two classes are nested in your sass code) to achieve at least the same level of CSS specifity as for the default styles:

@media (max-width: 900px) {
 .banner .row .image-container {
      .desktopimage {
        display: none;
      }

      .mobileimage {
        display: block;
      }
   }
}
user_56416690
Related