Chrome Device Mode Emulation Media Queries Not Working

I fixed this problem by adding a meta tag to my page:

 <meta name="viewport" content="width=device-width">

UPDATE (December 2019):

It looks like you may also need to set the initial scale and minimum scale, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

Chrome dev tools honors media queries, but browser doesn't

After looking at your video, the media queries look like the issue. You are checking for device width, which the browser sees as the FULL SIZE of your screen, rather than the width of the browser.

Try writing them like this:

@media all and (min-width: 1251px) and (max-width: 2600px) {
    */ code here /*
}

Notice it is checking just for the min-width rather than min-device-width.

I suggest you also have a read of these: https://css-tricks.com/css-media-queries/ and http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/ to get more of a grasp on how they work.

Responsive media query not working in Google Chrome

add this line in <head>

<meta name="viewport" content="width=device-width,initial-scale=1">

CSS media queries not showing up in chrome inspector

I tried to test different screen sizes and apply media queries by changing the size of the viewport in chrome's developer tools like this:

Sample Image

Apparently, this is not how the media queries works and you need to resize the browser to test different media queries for different screen sizes!

Chrome Device Mode Emulation Media Queries Not Working