CODEWITHSUNDEEP
google-chromeresponsive-designdeveloper-tools
theCodeJoker
theCodeJoker

Reputation: 11

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

I have media queries in a css file set from 0-500px and 501-1250px and so on...

My CSS breakpoints work great in the screen emulator in the Chrome developer tools when I have "Emulate Mobile" checked in the "emulation" tab. When that is unchecked or when I view it in the browser without dev tools open, it doesn't honor the breakpoints.

The breakpoints also work fine in Firefox's "Responsive Design Mode" but not in the regular browser when I close the dev tools.

I'm not sure how to best ask the question--Is it possible to get the styles to work in a regular browser?

here is a video of my screen demonstrating the problem:

https://youtu.be/_FBoDek0Ou0

Upvotes: 0

Views: 2300

Answers (1)

Sam Willis
Sam Willis

Reputation: 4211

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.

Upvotes: 2

Related Questions