Media queries not taking effect on browser resize

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