CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Patrick
Patrick

Reputation: 820

Media query changing itself?

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?

Upvotes: 0

Views: 94

Answers (1)

Gerrit0
Gerrit0

Reputation: 9242

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

Upvotes: 1

Related Questions