@media queries not applying some styles

Question

I have the following media query which applies the background style to the body successfully, however it does not change the others, any ideas pleople?

@media (min-width: 980px) and (max-width: 1200px) {
body {
    background:#F00;
}
.contentsearch.navbar {
    margin-left: -475px !important;
    top: 200px !important;
    width: 950px !important;
}
.contentTabs {
    margin-left: -475px !important;
    width: 948px !important;
}
.ui-tabs-panel { 
    width: 948px !important;
}
}

heres the original css for these elements

.contentsearch.navbar { 
     position:absolute; 
     top:200px; 
     width:1170px; 
     left:50%; 
     margin-left:-585px;  
}
.contentTabs {  
border-bottom: 1px solid #AAAAAA;
    border-left: 1px solid #AAAAAA;
    border-right: 1px solid #AAAAAA;
    bottom: 55px;
    height: auto !important;
    left: 50%;
    margin-left: -585px;
    position: absolute !important;
    top: 241px;
    width: 1168px;
 }
.ui-tabs-panel {
    border-bottom: 1px solid #DDDDDD !important;
    border-top: 1px solid #CCCCCC !important;
    bottom: -1px !important;
    height: auto !important;
    overflow: auto;
    position: absolute !important;
    top: 47px !important;
    width: 1168px;
}

In what order do these styles get applied? The media queries need to come after your initial CSS declarations — andymacd, May 02 '13 at 15:14
@andymacd Care to link something that prove your claim? Because last I checked it can be before or after. media got priority over any other CSS when the media condition are met. — snaplemouton, May 02 '13 at 15:22
[here you are](http://stackoverflow.com/questions/8790321/why-do-the-order-of-media-queries-matter-in-css) — andymacd, May 02 '13 at 15:27
@andymacd i have tried placing them right at the end of everything and till no result — Tom, May 02 '13 at 15:33
@andymacd alright thank you. Rereading my older projects I thought I had media before my initial declaration. Which is why I wasn't sure about that. — snaplemouton, May 02 '13 at 15:42
@Tom [check out this fiddle](http://jsfiddle.net/vkY5K/) - I used your css but I am not sure of the HTML, it works here. — andymacd, May 02 '13 at 15:50

artSx · Answer 1 · 2013-05-02T15:25:45.503

4

Try with this :

    @media all and (min-width: 980px) and (max-width: 1200px){
....
}

You forgot declared on what type of screen you want it to be active @media all and.....

You have :

all
screen
print
handheld
tv
etc..

You have excellent article for this

edited May 02 '13 at 15:25

answered May 02 '13 at 15:17

artSx

1,560
1
12
19

1

I was gonna answer but you were faster then me. :) +1 to you – snaplemouton May 02 '13 at 15:22

score 0 · Answer 2 · answered May 02 '13 at 15:25

0

Without media type it works anyway.

If you resize browser nothing happens? Original css should be displayed when your screen size has more than 980px, correct?

answered May 02 '13 at 15:25

Ana Sampaio

351
1
3
8

score 0 · Answer 3 · answered May 02 '13 at 15:56

I have solved the issue, thanks for your responses.

The problem was i was copy and pasting styles from another application, in transit them seem to have picked up some kind of strange formatting/characters, after rewriting them by hand it now works!

@media queries not applying some styles

3 Answers3