CODEWITHSUNDEEP
htmlcssmedia-queries
user4322189
user4322189

Reputation: 11

min width vs max width media queries CSS

I hope someone can help me with media queries?.

I have a series of min width -max width media queries .

However, if I remove the max-width syntax, the layout will break, but I can't figure out why this is happening.

If I remove the max-width syntax (including the and), the logic should be the same.. I'm saying, apply styles from 320px up, then apply new styles from 480px up

How can I convert this to just min width? (mobile first approach).

Am I missing something obvious?

@media only screen and (min-width: 320px) and (max-width : 480px) {
    #header h1 {
        font-size: 2em;
    }
    #nav ul li {
        margin: 0 .8em .6em 0;
        display: block;
    }

.......................more rules
}


@media only screen and (min-width: 480px) and (max-width : 800px) {
    #header h1 {
        font-size: 2.4em;
    }   
    #nav ul li {
        margin: 0 .8em .6em 0;
        display: inline-block;
....................................more rules
    }
}

Upvotes: 0

Views: 1835

Answers (1)

dippas
dippas

Reputation: 60543

You don't need to set max-width if you are using Mobile First Method:

So, try something like this:

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

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


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

In case you want to use the Non-Mobile First Method you don't need to set min-width and it looks like this:

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

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


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

Upvotes: 3

Related Questions