Enter CSS Media Queries in Chrome Developer Tools

Question

Pressing F12 I can instantly change CSS of elements in Chrome. However, I can not input @media screen and (max-width) similar to here:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

When I press enter it simply disappears. What can I do to dynamically add and remove media queries?

enter image description here

BoltClock · Accepted Answer · 2015-01-21T14:37:25.510

55

When you edit the styles for a specific element in the inspector, it is as though you were editing the element's inline style attribute: you can only place property declarations such as color: red in your example. This is even reflected in the DOM visualization itself as you edit an element's styles. Media queries don't belong in inline styles, they belong in @media rules which appear only in a proper stylesheet.

On Chrome, you will need to edit the inspector stylesheet directly in order to include your media queries. You can reach it by going to the Sources panel and choosing inspector-stylesheet.

Since this involves writing CSS, you will need to select the element. You can (usually) get a unique CSS selector for the element you choose by right-clicking it in the Elements panel and choosing Copy CSS path.

Then just write your CSS:

@media screen and (max-width: 300px) {
    /* selector for your element */ { color: red; }
}

edited Jan 21 '15 at 14:37

answered Jan 21 '15 at 14:31

BoltClock

700,868
160
1,392
1,356

1

I figured that part out, but is there a way to preview the changes? After editing the file through Chrome Developer Tools, there is an asterisk* next to the file name. By the way, the webpage is not on localhost; it is one that is already online at https://discussions.udacity.com/t/lesson-2-media-query/22206 – zeta Jun 25 '15 at 04:14
1

@zeta: The changes are applied on-the-fly as you edit. – BoltClock Jun 25 '15 at 04:58
1

You're right. I was in the "toggle device mode" where you can choose the resolution of devices and stuff and it didn't work there. – zeta Jun 25 '15 at 09:39
6

Note that the "inspector-stylesheet" becomes available in your Sources panel only after you have made some custom change to the CSS yourself (ie. added your own [+] New Style Rule) – kris Dec 07 '15 at 06:37

score 38 · Answer 2 · edited Jun 26 '19 at 12:20

38

You can use New Style Rule. Click on Plus symbol (+) besides .cls.

and then, you'll see it generates new class. Now click on inspector-stylesheet.

You will be redirect to Sources Tab with almost blank stylesheet. Now, you can put Media Queries in there.

edited Jun 26 '19 at 12:20

Mariusz Pawelski

25,983
11
67
80

answered Jun 28 '18 at 04:56

Daryl Malibiran

566
5
9

score 8 · Answer 3 · edited Dec 16 '15 at 02:20

You can always add the CSS within style tags in the head section. Just edit the HTML by right-clicking on the html and select "Edit as HTML". For example,

<style>
    @media screen and (min-width: 0px) and (max-width: 400px) {
        body {
            background-color: red;
        }
    }
    @media screen and (min-width: 401px) and (max-width: 599px) {
        body {
            background-color: green;
        }
    }
    @media screen and (min-width: 600px) {
        body {
            background-color: blue;
        }
    }
</style>

score 1 · Answer 4 · answered Apr 20 '16 at 18:22

I had the same problem and finally figured out that when I was entering for example:

@media (max-width: 767px)
.col-sm-3 {
  width: 75%;
}

my screen size was actually more than 767px. So when I pressed enter, it disappeared and seemed to not work. But what I realized is when I adjusted the screen size of my browser to below 768px, I saw the media query in the styles.

Enter CSS Media Queries in Chrome Developer Tools

4 Answers4