@media queries - one rule overrides another?
Posted
by
John
on Stack Overflow
See other posts from Stack Overflow
or by John
Published on 2012-10-10T15:27:36Z
Indexed on
2012/10/10
15:37 UTC
Read the original article
Hit count: 222
I have multiple @media queries all working fine but as soon as i put in a higher max screen-width than 1024px the rules for the higher width gets applied to everything.
@media screen and (max-width: 1400px)
{
#wrap {
width: 72%;
}
}
@media screen and (max-width: 1024px)
{
#slider h2 {
width: 100%;
}
#slider img {
margin: 60px 0.83333333333333% 0 2.08333333333333%;
}
.recent {
width: 45.82%;
margin: 10px 2.08333333333334% 0 1.875%;
}
}
as you can see 1024px (and also the 800px max-width query) do not change the #wrap width and work fine. As soon as i add the 1400px max-width query it changes them to 72% for ALL sizes and does the same for any element - for instance if i set #slider img to have a margin of 40px it will show at ALL sizes even though it is only in the max-width of 1400px.
Am i missing something really obvious? Been trying to work this out for the past 2 days! Thanks, John
© Stack Overflow or respective owner