CODEWITHSUNDEEP
cssresponsive-designmedia-queriesviewport
kuba-end
kuba-end

Reputation: 11

Why media queries doesn't apply

I read all @media topics on this site and it seems that code should working

body
{
    background-color: yellow;
}

@media screen and (min-width: 1080px;) and (max-width: 2000px;)
{
    body
    {
        background-color: green;
    }
}

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

i have viewport tag, but still background is always yellow... What's the problem?

Upvotes: 0

Views: 66

Answers (3)

Endurance
Endurance

Reputation: 1

I think you should check if there is a <meta> tag on the head part of your html document, Without the tag your media queries will not take effect

Upvotes: 0

GyanendraPC
GyanendraPC

Reputation: 11

There are some errors you should try this

body { background-color: yellow; } @media screen and (min-width: 1070px) { body { background-color: red; } } @media screen and (min-width: 1080px){ body { background-color: green; } }

Upvotes: 0

user9542422
user9542422

Reputation:

here just take out the ;

body
{
    background-color: yellow;
}

@media screen and (min-width: 1080px) and (max-width: 2000px)
{
    body
    {
        background-color: green;
    }
}

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

link to code example

Upvotes: 1

Related Questions