CODEWITHSUNDEEP
css
Val Do
Val Do

Reputation: 2695

Media query difference screen size in one css stylesheet

Hello I have this script and I need when screen size is 1600 px background-color was red and when screen size is 1366 px background-color was black, but my code not work, media query works only 1600 px

html

<div>

</div>

css

div{
    width:100%;
    height:100%;
    background-color:grey;
}

@media screen and (max-width:1366px){
    div{
        background-color:black;
    }
}

@media screen and (max-width:1600px){
    div{
        background-color:red;
    }
}

Upvotes: 5

Views: 139

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

The second styles overwrite the first one. Change the order. It will work.

 div{
width:100%;
height:100%;
background-color:grey;
}

@media screen and (max-width:1600px){
   div
   {
    background-color:red;
   }
}

@media screen and (max-width:1366px){
   div
   {
    background-color:black;
   }
}

DEMO

Upvotes: 4

Related Questions