@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.

Answer 1

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>