CODEWITHSUNDEEP
cssmedia-queries
Soeb Safi
Soeb Safi

Reputation: 341

CSS Media Query is affecting other queries also

Below are the media queries i have figured out and i will use as default for every project that i will do.

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}

Now, the problem i am facing with them is that when i try to change something on 768 it gets changed on 320 also. I want to change for example logo if i hide it on 768 it should only be invisible on 768 only, whereas in this case i have to manually go on each and every query and make it visible.

I have tried min-width also and max-width also. And min-width for mobile size and max-width for big sizes but with no luck.

And if i use fixed queries then also i have to write code for every query.

So, how do i make it work only for single size and does not affect the others, and most importantly not to write code for every size.

Upvotes: 4

Views: 2474

Answers (2)

G.L.P
G.L.P

Reputation: 7207

It will, To avoid that you need to write specific for all the resolutions below to that. For example: If you are hiding logo in 768 then it affects 480, 320,. To get rid of that you need to write in 480, that the specific logo to be visible, so that it will be reflected in 320 too.

/* #### CSS that's applied when the viewing area's width is 768px or less #### */
@media screen and (max-width: 768px){    

  div#logo{
    display: none;
  }
}

For logo to be visible in 480 and 320 try like this:

 @media screen and (max-width: 480){        

      div#logo{
        display: none;
      }
    }

For more info, Reference link

Upvotes: 2

Shelly
Shelly

Reputation: 351

@media screen and (min-width: 480px) and (max-width: 767px) {
    // applied  only between 767 px and 480px
}

Upvotes: 3

Related Questions