1. Home
  2. Knowledge Base
  3. Various
  4. Ghostlab 1: Legacy Documentation
  5. CSS from Media Queries don’t show up in inspector

CSS from Media Queries don’t show up in inspector

Ghostlab uses weinre to allow remote inspection. Weinre does support the displaying of CSS properties resulting from media queries, but only in a certain manner.

Any CSS resulting from inline @media sections in your CSS will not show up in weinre. If you want the CSS resulting from your media queries to show up in weinre, you have to include it as an external media-specific resource using the link tag, and specifying the media properties using the media attribute.

WORKS:

<!-- html file -->
<link rel="stylesheet" type="text/css" href="css.css">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="480.css">
/* 480.css */
p{
 color: #ccc;
}

DOESN’T WORK:

<!-- html file -->
<link rel="stylesheet" type="text/css" href="css.css">
/* css.css */
@media screen and (max-width: 480px){
  p{
   color: #ccc;
  }
}

Was this article helpful?

Related Articles