Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Enhancing the Design With CSS Media Query Basics

Juan Ramos
Juan Ramos
6,445 Points

media queries not working

am i doing something wrong? i have checked my code several times looking for a mistake and i can't figure it out.

8 Answers

Henry .
Henry .
52 Points
 <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
    </header>

Is covering your body background since its a header. But if you scroll down everything is red / works with smaller screen

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I took the liberty of forking your workspace and came to the same conclusion that Henri A did. Your media query is working. It does, in fact, change the background to red on smaller sizes.

That being said, there might be a couple of reasons that you aren't seeing that. First, and foremost, you have to be able to pull the size down that small for it to happen. If you are using Safari, it will not let you reduce the width of the window to the point where the media query is triggered. To see these effects in Safari you will need to enter "Responsive Design Mode" through the developer tools to achieve a size that will trigger that query.

As Henri has already noted, that header takes up a large portion of the page and you will have to scroll down to see the results (assuming they are being triggered).

And there might be a third reason you aren't seeing what we're seeing. It is possible that your browser is loading in a cached version of your code instead of your newly altered code. If you aren't using Safari and still can't see the background turning red after reducing the window size and scrolling way down, then my suggestion is to make sure you save your file, clear your browser cache, click the preview again and refresh the page.

I hope we can get this worked out for you because your code does, in fact, work! :sparkles:

Henry .
Henry .
52 Points

What is the code that is not working.

Juan Ramos
Juan Ramos
6,445 Points

im trying to change background at 960px or below but there's no change at any size, even if i change the pixels to a lower number

Henry .
Henry .
52 Points

Its working for me ? https://jsfiddle.net/t0L2z6np/2/

If you resize the window it changes the whole thing red?

Michael Martinez
Michael Martinez
5,681 Points

TL DR: cleared the cache and it worked. You can recreate all workspaces to default state by creating new workspace.

I had the same problem with the code not working and working part of the time. I first tried to skip up a video lesson. This lets me see code working on the previous lesson. So I know for a fact the code works and I have taken my human error out of the equation. It worked. So I go back with the correct code in hand and try it again.(copied and pasted back to previous workspace) Same problem it's not working. I know for a fact the code works. Somethings up. Saving the workspace got a bit funny as I overwrote it somehow.......I created a new one however. It's there. You can start off any of the lessons..... I found the right one and same problem.......Ok now I'm frustrated.....I cleared the cache and it works now.....Thats the process I went thru.