Clever Geek Handbook

CSS Media request also affects other requests

Below are the media queries I figured out and I will be using the default for every project I 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 running into is that when I try to change something to 768 it also changes to 320. I want to change, for example the logo, if I hide it at 768 it should only be invisible on 768, whereas in this case I need to manually navigate to each request and make it visible.

I have also tried min-width

and max-width

. For min-width

both mobile size and max-width

large size, but no luck.

And if I am using fixed requests, then I also need to write code for each request.

So how can I make it work for only one size and doesn't affect others, and most importantly, not write code for each size.

+3


source to share


2 answers 


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


+3


source


This will, To avoid this, you need to write specific for all of the resolutions below. For example: if you hide the logo in 768, then it affects 480, 320. To get rid of this, you need to write in 480 so that the particular logo is visible so that it is reflected in 320 too.

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

  div#logo{
    display: none;
  }
}

To get the logo to display at 480 and 320 try this:



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

      div#logo{
        display: none;
      }
    }

For more information Link link

+1


source






More articles:


All Articles