Media requests do not affect browser size

Question

I use media queries to create a mobile version of a website for a client. When I change the size of 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 interested to know why the media queries do not take effect when I change the size of the browser window itself. e. Firefox

Any input is appreciated.

The code I'm using is:

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

Answer 1

You have not published a sample code, so I assume: if you use the attribute: max-device-width or min-device-width, it will only work on devices with this width and will ignore manually resizing the browser.

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

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

Check here:

In the CSS environment, the difference between the width and the width of the device can be a little confused, so let's explain this 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 save your previous code and check the responsive nature of your website on your local computer using the Mozilla function Responsive design - shortcut "Control + Shift + M"