CODEWITHSUNDEEP
htmlcssmedia-queries
Renish Khunt
Renish Khunt

Reputation: 5824

CSS media and query not working?

This is my CSS media query code in header.html file. i write css media query in html file.

<style type="text/css">

@media (min-width:100px ) and (max-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:480px ) and (max-width:768px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:768px ) and (max-width:1200px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}      
</style>

This CSS is not working.

When i write css like this is working fine.

    <style type="text/css">

@media (min-width:100px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}
@media (min-width:768px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
}      
</style>

But This is overwrite css. so this is not working for me.

but why not working @media (min-width:100px) and (max-width:400px) query?

thank you.

Upvotes: 1

Views: 767

Answers (2)

MrPk
MrPk

Reputation: 2930

edited: in pure css, you have to declare your media and INSIDE put your conditions.

@media print { // rule (1)
  #anId{ 
    //something here
   }
  @media (max-width: 12cm) { // rule (2)
    //something here
  }
}

here docs

so first of your rules can be:

@media screen{
  @media (min-width:100px ) and (max-width:480px ){
    .background-color-sec-1-images {
        background-image: url("localhost/set/img/img1.jpg");
        background-repeat:no-repeat; 
        background-size:100% 100%;
    }        
  }
}

Upvotes: 1

brobken
brobken

Reputation: 358

you must declare which media you are using:

http://www.w3schools.com/css/css_mediatypes.asp

so in your case use as follows:

@media screen (min-width:100px ) {
/* your styling goes here */
}

Upvotes: 1

Related Questions