CODEWITHSUNDEEP
cssmedia-queries
ptrcao
ptrcao

Reputation: 423

CSS media query being ignored

This code is a part of my positionally-fixed website menu which controls the margin from the top to prevent overlap with the content. It depends on how wide the screen is. However, I can't understand why the @media screen and (max-width: 329px) {} condition is being ignored and overriden by the @media screen and (max-width: 604px) {} condition. (FYI they represent breakpoints at which the fixed menu breaks onto a new line, requiring the content to be pushed down one line, correspondingly.)

Live demo: https://www.ashenglowgaming.com

@media screen and (max-width: 604px) {
  #menu-w-home-menu {
    line-height: 1.2em;
  }
  #main {
    margin-top: 89px !important;
  }
}

@media screen and (max-width: 329px) {
  #main {
    margin-top: 113px !important;
  }
  #menu-w-home-menu {
    line-height: 1.2em;
  }
}


/* For all larger screen sizes */

#main {
  margin-top: 66px;
}

#menu-w-home-menu {
  line-height: 1.2em;
}

Upvotes: 0

Views: 989

Answers (2)

mblancodev
mblancodev

Reputation: 506

Remember that the browser reads your css from top to button so you just have to re-order your css and media query

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

This is because of your css order. Place your normal css above the media query like below. It will work fine

#main {
  margin-top: 66px;
}

#menu-w-home-menu {
  line-height: 1.2em;
}

@media screen and (max-width: 604px) {
  #menu-w-home-menu {
    line-height: 1.2em;
  }
  #main {
    margin-top: 89px !important;
  }
}

@media screen and (max-width: 329px) {
  #main {
    margin-top: 113px !important;
  }
  #menu-w-home-menu {
    line-height: 1.2em;
  }
}

More help on to understand the order

I hope this will help you!

Upvotes: 2

Related Questions