CODEWITHSUNDEEP
htmlcssimportmedia-queries
Darkrum
Darkrum

Reputation: 1383

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

Upvotes: 2

Views: 1409

Answers (2)

A Web-Developer
A Web-Developer

Reputation: 858

Your last css rule is overriding previous one. The @media tag act like an if. So in your /*doesnt work*/ one what it basically saying is 

.class1 {/*This is your doesnt work code*/
    width: 88%;
}

.class1 {
    width: 300px;
}

Change the order of your universal code and media tags or use !important to solve this.

Upvotes: 1

Darkrum
Darkrum

Reputation: 1383

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

Upvotes: 1

Related Questions