CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3media-queries
rikuto148
rikuto148

Reputation: 263

Problems with media queries

So I'm building my personal site using bootstrap. Currently I'm trying to make the content fit at the mobile sizes.

My problem is I can't quite remember how to use queries and the way I'm doing it stops working at a certain point.

So basically what I'm doing is putting the mobile CSS style in the main CSS then altering it as the screen gets bigger.

But for some reason the queries stop working after 992px.

Is there a better way to do this that will work and make more sense.

Upvotes: 0

Views: 1210

Answers (1)

dippas
dippas

Reputation: 60543

Here is how you should use media queries:

Remember use the sizes you like/need. This below is just for demo purposes.

Non-Mobile First Method using max-width:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width: 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width: 320px) {
      /*your CSS Rules*/ 
    }

Mobile First Method using min-width:

/*==========  Mobile First Method  ==========*/

    @media only screen and (min-width: 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width: 960px) {
      /*your CSS Rules*/ 
    }

Here is a good tutorial from W3.org

Upvotes: 4

Related Questions