CSS problems media query [duplicate]

Question

CSS problems media query [duplicate]

Navigation

#1 by (4 votes)

2

I have a small problem what happens is that when I implement the media query on the website, it does not detect all of them.

I mean, if I put this example, for example

      @media (min-width: 768px) {
       .navbar-brand > img {
         width: 121%;
         position: relative;
         left: -25px;
        } 
       }

I do everything right, but if I put another media for the mobile version for example

      @media(min-width:425px){
      .navbar-brand > img {
       width: 68%;
       position: relative;
       left: -1%;
       top: 5px;
       }
      }

It makes me all the change in the mobile version, but when I see the changes of the other medias or return to the normal version, it does not detect them, it keeps the changes of the smallest average.

css3 css mediaqueries

asked by Luis Uribe 17.12.2018 в 21:40

source

1 answer

How to read strings of a structure passed by reference java.lang.RuntimeException: Unable to start activity, java.lang.NullPointerException in Android Studio

score 4 · Answer 1

The order of the rules in CSS is very important. If two different rules have the same value of specificity , the one that appears later in the code (because overwrites the other one).

So if you have this post:

@media (min-width: 768px) {
  .navbar-brand > img {
    ...
  }
}

...

@media(min-width:425px){
  .navbar-brand > img {
    ...
  }
}

The rules of the second media query will always be applied because if the screen is more than 768px wide, it will also have more than 425px, so the second media query will be entered and the styles will be overwritten.

The solution is simple: order your average queries so that lower values always appear first (when you are using min-widht ):

@media(min-width:425px){
  .navbar-brand > img {
    ...
  }
}

...

@media (min-width: 768px) {
  .navbar-brand > img {
    ...
  }
}