CODEWITHSUNDEEP
csstwitter-bootstrap-3media-queries
user1532468
user1532468

Reputation: 1753

Cannot get my css media queries to work with bootstrap

I am using bootstrap v3.3.6 and for the life of me, I cannot see how to override the default media queries. I have tried various ways to overcome this, but nothing I try works. The query does not even appear in firebug or chrome developer.

From what I can see, bootstrap layout there media queries like thus:

@media (max-width: 767px) {
  /* code goes here */
  }

But from all research I have done trying to overcome this, media queries are laid out as:

@media screen and (max-width: 480px) {
    /* code goes here */
}

Should both queries work?

I have posted the code I am using and be very grateful if someone could help me overcome this. Many thanks

@media (min-width: 320px) {

.navbar-brand {
    /*float: left;*/
    padding: 0;
    height: 50px;
    margin-left: -30px;
    margin-top: 5px;
    /*line-height: 20px;*/
    }
}

Upvotes: 0

Views: 658

Answers (1)

Marcel Schmid
Marcel Schmid

Reputation: 424

So there are 2things which could be the reason for the problem:

First: bootstrap uses more precise selector than you do. E.g. 

.div .navbar-brand { code goes here;}

Or if you use the same selector bootstrap gets loaded after your CSS and overwrites yours.

So make sure you get loaded later, you have same or more precise selectors and you should be fine.

If you can´t fix it either way you can use !important, but thats rather bad practice

Upvotes: 1

Related Questions