Search code examples
htmlcsstwitter-bootstrapmedia-queries

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?

Solution

  • 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.