Why does the Chrome DevTools Responsive viewport think it's 980px wide?

Question

I've used Chrome DevTools to resize the viewport to 480px wide, as shown below.

I'm using bootstrap's grid layout, so I have a div.container that I'm using, as shown in the bottom left. When I hover over it, I see chrome has that particular div marked as width 750px (and the whole body is 980px), even though I clearly have the screen set at a smaller resolution. Even the ruler at the top shows it is 480px wide.

For further confirmation, you can see the media query that says the width of 750px should only be set at higher resolutions (min 768px), so the viewport is assuming it's a higher width than it is.

Am I mis-understanding how the responsive feature is used?

Thanks!

Answer 1

For accepting answer

As stated in comments: you are missing meta tag with viewport that is required for media-queries to take effect.

Answer 2

As answered above, adding a metatag in html header will resolve the issue. Below is the viewport element, which should be included in all your web pages

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