media queries overridden by general declarations

Question

My common css rule is like:

#dayslist > div {
   height: 51px;
}

and media Query css rule:

@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}

But when I shrink my browser to width less than 979px the media query rule does'nt apply and common css rule takes precedence over the rule defined in media query.

enter image description here

You mean the media rules exist but the common css rule takes over it? — Shirin Abdolahi, Oct 12 '14 at 10:55
@nCore...But i have to apply the style to divs inside dayslist not dayslist!! — bhavya_w, Oct 12 '14 at 10:59
You've cut off the line numbers, which would have been helpful to see why your queries aren't working. If your media query appears before the other declaration, the MQ will always be overridden by the later declaration. — i alarmed alien, Oct 12 '14 at 11:05
possible duplicate of [Default CSS overriding media query](http://stackoverflow.com/questions/18395316/default-css-overriding-media-query) — , Oct 14 '14 at 08:40
Also http://stackoverflow.com/questions/19038240/media-query-styles-not-overriding-original-styles and about half-a-dozen similar questions. — , Oct 14 '14 at 08:45

score 2 · Accepted Answer · answered Oct 12 '14 at 11:14

2

You're overwriting your media query declarations with a later statement:

@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}

...

#dayslist > div {
   height: 51px;
}

Regardless of the screen width, the second statement, setting the height to 51px, will always apply. The solution is to load the media queries after the general declarations, so that they override the general css rules, i.e.:

#dayslist > div {
   height: 51px;
}
@media (max-width: 979px){
    #dayslist > div {
        height: 44px;
    }
}

answered Oct 12 '14 at 11:14

i alarmed alien

9,232
3
26
40

1

Put the MQ **AFTER** the general rule -- see my answer. – i alarmed alien Oct 12 '14 at 11:19
I usually organise my css files to have the media queries right at the end--that way, there is no danger that they'll be messed up by other declarations. – i alarmed alien Oct 12 '14 at 11:21

media queries overridden by general declarations

1 Answers1