CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmedia-queries
mituw16
mituw16

Reputation: 5250

CSS Media Query not over riding

I've always done max-width media queries, but I know bootstrap does min-width style media queries, and I'm trying to follow that style on my current project.

I have the following class declaration (no media query here)

.Mobilemenutrigger {
    padding: 2px 12px 2px 12px;
    background: #6bb854;
    display: inline-block;
    float:right;
    margin-right: 20px;
    margin-top: 20px;
}

Then following bootstrap's media query conventions, I have the following

@media (min-width: 768px) { 
    .Mobilemenutrigger {
        display: none;
    }
}

However when I view this in my browser, the original declaration is being applied, and the media query is not over riding the original as I thought it should.

I know I can throw an !important onto the media query, but I was under the impression I don't need to when doing min-width style media queries. Am I missing something really obvious here?

Upvotes: 3

Views: 125

Answers (3)

IAteYourKitten
IAteYourKitten

Reputation: 1019

Make sure the browser is reading your media queries AFTER it has read the initial class properties.

Upvotes: 4

Luca Detomi
Luca Detomi

Reputation: 5716

Due to same specificity, you must add mediaquery AFTER initial declaration.

If you invert order, it will result in an ovverride of general rule over the mediaquery's one.

Written in this exact order, it will run correctly as shown here:

.Mobilemenutrigger {
    padding: 2px 12px 2px 12px;
    background: #6bb854;
    display: inline-block;
    float:right;
    margin-right: 20px;
    margin-top: 20px;
}

@media (min-width: 768px) { 
    .Mobilemenutrigger {
        display: none;
    }
}

Instead, if you invert order, and you have screen wider than 768px, first, mediaquery would set display: none;, and then more general rule would override it with display: inline-block;

Upvotes: 2

Wolvenhaven
Wolvenhaven

Reputation: 335

What is the load order for your files? If the main.css is being loaded after the media.css it won't function properly. Try appending the media.css last and see what happens.

Upvotes: 2

Related Questions