Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sofia Woods
Sofia Woods
814 Points

Media queries aren't printing

Hi There - I've been nesting my media queries into my partials, but they're not printing to my applications.css stylesheet?

One of them did - but the rest don't - they do work and I can see them - eg:

This one outputs to the CSS 

.arrow {
  width: 50px;
  margin-top: 150px;

  @media #{$brk-narrow}
  {
       display: none;
  }
}

.arrow {
  width: 50px;
  margin-top: 150px; }
  @media (max-width: 768px) {
    .arrow {
      display: none; } }

But none of the others show up in my main CSS file but they do work on the front end?

eg: the rule for intro is in my partial as this

.intro {
  font-size: 1.25em;
  line-height: 1.6; 
  color: initial;

  @media #{$brk-narrow}{
    font-size: 1rem;      
  }
}

and it prints this to the CSS (note no media query prints)

.intro {
  font-size: 1.25em;
  line-height: 1.6;
  color: initial; }

But the query is still displaying in the web inspector (in the scss file) and it works but doesn't print to the stylesheet?

Any clues would be great!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

David Bath
David Bath
25,940 Points

It's difficult to understand how it "works" if it doesn't output to the css file. Browsers don't understand scss. Are you saying that you see the visible effects of the style on the HTML, or that you just see the source maps in the inspector?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Do you have other media queries in the same partial file that .arrow is in?

1 Answer

Sofia Woods
Sofia Woods
814 Points
Sofia Woods
Sofia Woods
814 Points

Hi team , yes I'm saying that the browser is recognising the media query - even though it's not compliling to the CSS. I'm not sure why the first scss media query is compiling and the second one isn't...

sorry 'print' was the wrong term, I meant complie