CODEWITHSUNDEEP
htmlcssmedia-queries
user6508317
user6508317

Reputation:

media queries in css not working properly

I am using this code in my web page and I tried different settings for min-width but it take values only from the media query having least width.

@media only  screen and (min-width: 900px) {
    li{
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.one{
        padding-left: 13%;
    }
@media only screen and (min-width: 800px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;}
    li.two{
        padding-left: 9%;
    }
}
@media only screen and (min-width: 600px),screen and (max-width: 601px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.three{
        padding-left: 7%;
    }
}

Don't know what is stopping other queries to work properly.

Upvotes: 4

Views: 15010

Answers (7)

ITbug
ITbug

Reputation: 45

@media (min-width: 768px) {} works for me. also add <meta name="viewport" content="width=device-width, initial-scale=1"> to head tag

Upvotes: 1

Leslie Johnson
Leslie Johnson

Reputation: 11

The order of query sizes should be changed. In CSS, the last valid query wins, so the query falls though to the smallest. The largest should come last.

Upvotes: 1

Johannes
Johannes

Reputation: 67778

1.) Your third query should be written like this:

@media only screen and (min-width: 600px) and (max-width: 601px) {...

(a comma would mean two independent selectors)

2.) You made your li elements inline elements. But an inline element can't have any padding - all these padding values don't affect anything. So change the display settings to inline-block for these.

Upvotes: 3

Awadhesh verma
Awadhesh verma

Reputation: 540

You have left one curly bracket inside 900 media query. Copy this code and replace media query.

@media only  screen and (min-width: 900px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.one{
        padding-left: 13%;
    }
}

@media only screen and (min-width: 800px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.two{
        padding-left: 9%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 601px) {
    li {
        display: inline;
        padding-left : 5%;
        padding-right: 5%;
    }
    li.three{
        padding-left: 7%;
    }
}

Upvotes: -1

Devansh sadhotra
Devansh sadhotra

Reputation: 1625

@media screen and (min-width: 320px) {
    //your css class
}
@media screen and (min-width: 321px) and (max-width:480px){
    //your css class
}

@media screen and (min-width: 481px) and (max-width:720px) {
    //your css class
}

@media screen and(min-width: 721px) and (max-width:1080px) {
    //your css class
}

@media screen and(min-width: 1080px) and (max-width: 1280px){
    //your css class
}

@media screen and (min-width: 1281px) and (max-width: 1920px){
    //your css class
}

Try using your queries like this, this way worked for me

Upvotes: -1

ITbug
ITbug

Reputation: 45

add this to in your head tag and close proper media query braces you didnt close do check properly.

Upvotes: -2

Hari Om Srivastava
Hari Om Srivastava

Reputation: 346

Please add this code in your HTML page 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Upvotes: 6

Related Questions