CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Tesnich
Tesnich

Reputation: 37

Media Query Being Ignored

I have two logos: one for small screens and one for large ones.

Rather than different resolutions of the same image, these are two very different .png files and thus I can not use a scaling function. In my attempt to use them, I created the following media queries in a .jsp page with the purpose of editing a div box in order to show the files as background-images:

<style>
    <meta name="viewport" content="width=device-width, initial-scale=1">
@media (min-width: 1200px) {
  .zachery_div {
    background: url(/assets/img/LargeLogo.png);
        width: 764px;
        height: 76px;
        float: right;
  }
}

@media (max-width: 1199px) {
  .zachery_div {      
     background: url(/assets/img/SmallLogo.png);
        width: 262px;
        height: 76px;
        float: right;
  }
}
</style>

However, this only gives me the smaller logo when the width of the window is below 1199px.

If I expand the window to 1200px or above I receive nothing.

Both images are valid because swapping their position allows me to call either one, but never both.

Can any of you tell me what is wrong with my code?

Upvotes: 0

Views: 587

Answers (1)

dippas
dippas

Reputation: 60573

When using mobile first approach (min-width) the smaller values come first, so your code would be:

.zachery_div {
  height: 76px;
  float: right;
}
@media (max-width: 1199px) {
  .zachery_div {
    background: url(/assets/img/SmallLogo.png);
    width: 262px;
  }
}
@media (min-width: 1200px) {
  .zachery_div {
    background: url(/assets/img/LargeLogo.png);
    width: 764px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">

Note that meta tag shouldn't be inside style tag. but inside head before style

And since you had repeated properties, I put them outside of @media as they are "standard" across the code

Upvotes: 3

Related Questions