Search code examples
htmlcssimportmedia-queries

CSS @import causes media queries class not work

So i have run into something interesting. I like to have my css nice and neat and only want one reference of a style sheet in the <head> so to accomplish this i created a master css file that uses @import to bring in the rest of the style sheets. The problem I'm running into is that when you do this for some reason css media queries that use class selectors do not work but if you use ids it does... What gives?

The HTML

    <head>
        <meta charset=utf-8>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <title>Some page</title>
        <link href=master.css rel=stylesheet>
    </head>

The master.css

@import url(css/some.css);
@import url(css/somemore.css);
@import url(css/media.css)

The media.css

/* This works */

@media all and (max-width: 380px) {
    #id1, #id2 {
        width: 88%;
    }
}


/* This doesn't */

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}
Solution

  • I figured out why it was doing it my media queries were before my class in the style sheet...

    /* This doesn't work */

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

.class1 {
    width: 300px;
}

    .

    /* This works */

.class1 {
    width: 300px;
}

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}