CODEWITHSUNDEEP
cssmedia-queries
Tom
Tom

Reputation: 406

@media queries not applying some styles

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;
}

Upvotes: 1

Views: 1607

Answers (3)

Tom
Tom

Reputation: 406

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!

Upvotes: 0

artSx
artSx

Reputation: 1620

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

Upvotes: 4

Ana Sampaio
Ana Sampaio

Reputation: 351

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?

Upvotes: 0

Related Questions