CODEWITHSUNDEEP
cssgoogle-chromemedia-queriesdeveloper-tools
Sam Scott
Sam Scott

Reputation: 1336

Chrome Device Mode Emulation Media Queries Not Working

For some reason device emulation mode is not reading my media queries. It works on other sites including my own sites that I made with bootstrap, but it's not working on media queries I am using from scratch (clicking the media queries button turns the button blue but no media queries are displayed). Test file below. Is this a bug in Chrome or is there something I need to change in my file?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Upvotes: 131

Views: 75580

Answers (7)

TheNuggitMan
TheNuggitMan

Reputation: 430

I would like to add - along with the accepted answer - media queries only work (for me) on chrome's inspect when the @media query is written below the rest of the CSS code.

Upvotes: 0

kqvanity
kqvanity

Reputation: 100

Kept having the same problem till I noticed that if I have more than one implementation for the same set of rules depending on the screen size:

Specify both the minimum and maximum width for the same media query so that it doesn't get overwritten by the subsequent one:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

Or set at least one breakpoint to all :

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}

Upvotes: 0

williamvivas
williamvivas

Reputation: 199

Include this meta tag in your code: 

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Upvotes: 7

BananaNeil
BananaNeil

Reputation: 10772

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" />

Upvotes: 357

Nati Kamusher
Nati Kamusher

Reputation: 791

Works for me.

Just put a viewport meta tag in the head section of your page. See example:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Upvotes: 0

sanjsanj
sanjsanj

Reputation: 1022

The accepted answer didn't do it for me, I had to add a minimum-scale=1 as well.

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

Upvotes: 30

Digger
Digger

Reputation: 738

Device emulation in Chrome is still a WIP. To be honest I think they pushed it to Chrome a little too soon. Try using Canary (the chrome beta browser) to test the emulation, I find that it's working way better than the one in Chrome.

Upvotes: 6

Related Questions