@media min-witdth is being ignored by browser

Question

I've a pair of rules for screens with 768 width. The problem is that on screens bigger than that, the browser takes the wrong rule, applying the one for the older screens.

@keyframes p1
{
    from{
        bottom:0;display:none;opacity:0;
    }
    50% {
        bottom:15;opacity:0.5;
    }
    to{
        bottom:25%;display:block;opacity:1;
    }
}


@media screen and (max-width: 800px) {
    @keyframes p1
    {
        from{
            bottom:0;display:none;opacity:0;
        }
        50% {
            bottom:10;opacity:0.5;
        }
        to{
            bottom:15%;display:block;opacity:1;
        }
    }
}

On bigger screens, the browser takes the max-width rule, ignoring the default.

What do you mean by _...applying the one for the older screens._? — Asons, Jan 07 '16 at 12:54
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jan 07 '16 at 12:55
Another thing is you write `min-width` in your title but use `max-width` within your question. Which one is it? — Asons, Jan 07 '16 at 12:57
I've tried with both, but the result is the same. I mean that, if I put min-width rule and the default, a HD screen will load the one with the min-witdh instead the default. Moreover, If I put another rule starting at 900px (min-width:900px) the result is the same, the browser is always taking the 700px @media rule. WisdmLabs No, it's just below the object it's animating — user1423168, Jan 07 '16 at 13:14

score 0 · Accepted Answer · edited May 23 '17 at 12:23

Check this question, which this is likely a duplicate of, it has a lot of good answers.

~~This works as expected where a big screen shows the div in blue (default), a medium will show green and on smaller it shows as red.~~

Pay attention to the media query rule order.

Side note: Also be aware that some "small screens" can have many pixels despite being physically small in size. Check this answer for more on devices.

div {
  background-color: blue;
  height: 30px;
}

@media screen and (max-width: 1200px) {
  div {
    background-color: green;
  }
}

@media screen and (max-width: 800px) {
  div {
    background-color: red;
  }
}

<div></div>

@media min-witdth is being ignored by browser

1 Answers1