Media queries not taking effect on browser resize

Question

I'm using media queries to make a mobile version of a website for a client. When i resize the browser the media queries do not take effect, however they do take effect when the site is viewed on each device - i'm just curious as to why the media queries don't take effect when i resize the browser window itself i.e. Firefox.

Any input is much appreciated.

Code i'm using:

    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 720px) {
    #container {
        width: 100% !important;
        }
    }

Answer 1

If you are using attribute: max-device-width or min-device-width, it will work only on devices with that width and will ignore the manual browser resizing.

You should change the attribute to: max-width / min-width.

@media screen and (min-width: 1024px){
  /* some CSS here */
}

Check here:

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Answer 2

change your code to -

@media only screen 
and (min-width : 320px) 
and (max-width : 720px) {
#container {
    width: 100% !important;
    }
}

alternately you can keep your previous code and check the responsive nature of your website in local computer by Mozilla Responsive Design View feature - shortcut 'Control+Shift+M'