Media query in css not working for different width

Question

I am learning media query at the moment.I am trying to give different width to the div as per the device width.This is the css i have done

.cont
{
  margin:auto;
  width:1200px;
  background-color:maroon;
  height:80px;

}

@media all and (max-width:480px)
{
  .cont{ width:400px; background-color:yellow; }
}

@media all and (max-width:768px)
{
  .cont{ width:700px; background-color:pink; }
}

I have included the meta tag as well

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

The problem here is that media query won't work for max-width:480.In the 480 and less resolution it still shows the background color of max-width:768px ie the pink color.
If i keep the max-width:480px query below max-width:768px then the 480px will work and 768px won't.How do i make both work?

add a min-width for 768 @media query fiddle

Vitorino fernandes
– Vitorino fernandes

2014-11-06 06:16:00 +00:00
Commented Nov 6, 2014 at 6:16 — Vitorino fernandes
– Vitorino fernandes, Commented Nov 6, 2014 at 6:16

Vitorino fernandes · Accepted Answer · 2014-11-06 06:16:52Z

4

add a min-width for 768 @media query

demo - http://jsfiddle.net/41x65u8d/

@media only screen and (max-width : 320px) {
    .cont {
        background:blue;
    }
}
 @media only screen and (min-width : 321px) and (max-width : 768px) {
    .cont {
        background:pink;
    }
}

answered Nov 6, 2014 at 6:16

Vitorino fernandes

16k3 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Media query in css not working for different width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related