Swap out 3 differently-sized logos with media queries?

css, media-queries

Solution

Try to use the min-width on the second media query also. Even when the screen is small the second query is true and the last css gets preference so its loading the second query image. Make the following change.

@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;
  }
}

Problem

I'm trying to have 3 different logo sizes (`small`, `med`, `big`) based on different screen sizes. Here's 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; } } ``` This works swapping from `big` to `med`, but it won't swap again from `med` to `small`. Why?

Original source