CSS Media Query not over riding

Vote count:

1

I've always done max-width media queriers, 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 follow 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 meqia 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?

asked 1 min ago

mituw16

1,672

CSS Media Query not over riding