CSS media and query not working?

Question

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.

try min-width:481px and try min-width:769px in the second and third. — sharshi
– sharshi, Commented Apr 2, 2014 at 14:59
The CSS seems fine jsfiddle.net/8V3L7, background images are swapping out for me. Are you certain it's the media queries that are causing the problem? Can you provide more context for this? — Serlite
– Serlite, Commented Apr 2, 2014 at 15:06
@Serlite i mention that the i write css in html page so that not working? — Renish Khunt
– Renish Khunt, Commented Apr 2, 2014 at 15:08

MrPk · Accepted Answer · 2014-04-02 15:38:31Z

1

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

edited Apr 2, 2014 at 15:38

answered Apr 2, 2014 at 15:04

MrPk

2,9502 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

brobken · Accepted Answer · 2014-04-02 15:12:05Z

1

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 */
}

answered Apr 2, 2014 at 15:12

brobken

3581 silver badge12 bronze badges

Collectives™ on Stack Overflow

CSS media and query not working?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related