Media query changing itself?

Question

I set a media query to change properties of my #secondary wrapper

This is the media query I set

@media screen and (max-width: 767px) {
.left-sidebar #secondary {
    float: right;
    width: 100%!important;
}

The problem is its not applying those changes until 479px even though i set it to 676px;

When i look in dev tools in google to view the css it looks like this

@media (max-width: 479px)
@media screen and (max-width: 767px)
.left-sidebar #secondary {
    float: right;
    width: 100%!important;
}

Why could this be happening and how do i fix it?

Answer 1

It looks like your issue is missing braces on your media queries. I usually find it helpful to indent everything within a media query so this doesn't happen by accident.

@media screen and (max-width: 767px) {
    .left-sidebar #secondary {
        float: right;
        width: 100% !important;
    }
}

Instead of

@media screen and (max-width: 767px) {
    .left-sidebar #secondary {
        float: right;
        width: 100%!important;
    }