CODEWITHSUNDEEP
google-chrome-devtools
Kit Sunde
Kit Sunde

Reputation: 37075

How can I add a @media query through the chrome inspector?

If I do @media(min-width: 375px) in the chrome inspector it drops my code as soon as I try to enter the body to define more of the rule.

Trying to add a media query using the chrome inspector

Is it possible to add @media rules through the inspector?

Upvotes: 8

Views: 2714

Answers (1)

Gideon Pyzer
Gideon Pyzer

Reputation: 24028

It looks as though the Styles editor panel doesn't support adding @media rules. However, you can get around this by clicking on the inspector-stylesheet link to open it in the Sources panel. It is then possible to enter your @media query and the changes will be reflected immediately.

inspector-stylesheet

inspector-stylesheet editing

You can consequently see it in the Styles panel afterwards and modify the rule and CSS properties inline. It is just the initial creation that it doesn't support.

Styles panel

Upvotes: 11

Related Questions