CODEWITHSUNDEEP
cssmedia-queriesresponsive
Neagu Claudiu Alexandru
Neagu Claudiu Alexandru

Reputation: 29

CSS is not executed in media query

I am trying to make a desktop size website responsive. Just as I started, I noticed that the CSS rule is read by the browser however it is not executed regardless if the media query rule is true or not. I included the <meta content="width=device-width, initial-scale=1" name="viewport" />, no change. I can not manage to find the logic of the browser and why it is not reading it. 

div class="nav">
   <div class="logo"><a href="index.html">GETTI</a></div>
   <div class="nav-menu">
      <div class="menu-item"><a href="#">Home</a></div>
      <div class="menu-item"><a href="#">Why Choose Us</a></div>
      <div class="menu-item"><a href="#">How it works</a></div>
      <div class="menu-item"><a href="#">Teams</a></div>
      <div class="menu-item"><a href="#">Contacts</a></div>
    </div>

CSS: 

@media screen and (max-width: 768px) {
    body {
        width:100%;
    }
    .nav-menu {
        display:none;
    }
}

I am somehow sure that it has to do with how the normal (not responsive) CSS was written so I am going to include that as well.

.nav-menu {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (20%)[auto-fill];
    grid-template-columns: repeat(auto-fill, 20%);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    line-height: 100%;
}

Upvotes: 0

Views: 51

Answers (1)

Johannes
Johannes

Reputation: 67748

If the CSS rules are in the order which you posted in your question (i.e. media query first, then general rules), the general rules will always overwrite the rules from the media query (because they are valid for any screen size). Just change the order to avoid that: General rules first, then media queries.

Upvotes: 2

Related Questions