Geek asks and answers

Share 3 logos of different sizes with the media?

I'm trying to have 3 different size of the logo ( small, med, big) on the basis of different screen sizes. Here is my code:

@media screen and (max-width: 487px) {
  .site-header .site-branding {
    background-image: url("../images/logo_small.png") !important; 
  }
}

@media screen and (max-width: 1079px) {
  .site-header .site-branding {
    background-image: url("../images/logo_med.png") !important;
  }
}

@media screen and (min-width: 1080px) {
  .site-header .site-branding {
    background-image: url("../images/logo_big.png") !important;
  }
}

Data is being exchanged from bigto med, but it will not be replaced from medto small. Why?

+3
source share
3 answers

Try also using the minimum width in the second media query. Even when the screen is small, the second request is true and the last css takes preference, so it loads the second image of the request. Make the following changes.

@media screen and (max-width: 487px) {
  .site-header .site-branding {
    background-image: url("../images/logo_small.png") !important; 
  }
}

@media screen and (min-width: 487px) and (max-width: 1079px) {
  .site-header .site-branding {
    background-image: url("../images/logo_med.png") !important;
  }
}

@media screen and (min-width: 1080px) {
  .site-header .site-branding {
    background-image: url("../images/logo_big.png") !important;
  }
}
+4
source

You can order it as follows:

CSS

@media screen and (min-width: 1080px) {
    .site-header .site-branding {
        background-image: url("../images/logo_big.png") !important;
        background: blue;
    }
}
@media screen and (max-width: 1079px) {
    .site-header .site-branding {
        background-image: url("../images/logo_med.png") !important;
        background: green;
    }
}
@media screen and (max-width: 487px) {
    .site-header .site-branding {
        background-image: url("../images/logo_small.png") !important;
        background: red;
    }
}

DEMO HERE

+1
source

See http://css-tricks.com/logic-in-media-queries/ in the Override section.

I think that it happens that both the first and second media queries are true, so the second is the first priority; thus never reaching the point to switch to small.

Solution: transfer the first media request as the last ... should fix it and adjust accordingly.

+1
source

More articles:


All Articles