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 CSS Basics (2014) Enhancing the Design With CSS Media Queries

Chris Shaffer
Chris Shaffer
12,030 Points
Posted by Chris Shaffer
Chris Shaffer
12,030 Points

Yet another broken code challenge

This question requires targeting the main-header class with a media query (again, super annoyed that I have to take basic CSS crap again due to a course "update" that I couldn't see without first adding to my track) and to target devices 1020px and smaller.

This is the code I'm using, which is perfectly correct and working in my browser, yet the code challenge refuses to accept it:

@media (max-width:1020px) {
  .main-header {
    background-color:tomato;
    color:white;
  }

}

Please just pass this fricking course automatically for me so I can move on to actually learning something.

style.css 
/* Complete the challenge by writing CSS below */
@media (max-width:1020px) {
  .main-header {
    background-color:tomato;
    color:white;
  }

}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->
  </body>
</html>

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Chris,

It won't pass as the css is wrong. It should be @media screen and.
The Treehouse code challenge needs the semantically correct code to allow you to pass. Even if it does pass in your browser, the code challenge is looking for the code the exact way it teaches in the tutorials.

Hope this helps.

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

Please watch the video. I'm 100% clear on how to create a media screen, and I do professional development, so I'm clear on how to do this.

If you watch the video, the specific method used is only using @media, which is still technically correct for the code challenge.

Besides, using @media, @media screen or @media screen and .. makes no difference. It doesn't pass.

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Hi Chris, not sure what's up with the challenge but aside from that you can take courses in any order you like - I've never strictly followed the tracks.

If you want to move on you can select the topic you want from the track, click "view course" then carry on as normal. Despite the icon indicators and descriptions saying "locked" there is nothing to stop you taking any course you like.

If you hadn't finished the older CSS Foundations course before the new CSS Basics course was added you can continue it here.

There a loads of videos in the full library that aren't in any of the tracks. You can see all the CSS courses on this page.

Any word on the challenge behaviour Guil Hernandez?

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

You cannot move on to the next part of this track without finishing CSS Basics. It will not allow me to move on. It's greyed out an locked.

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

In order to continue the TRACK, I have to complete the previous lessons:

This course is locked. To unlock this course, you must first complete the courses in the preceding tier. Alternatively, you may take this as a standalone course off-Track.
Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

Yep and to the right of that is a "view course" button. Give it a click <3

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

So you guys still haven't fixed this?

Chris Shaffer
Chris Shaffer
12,030 Points
Chris Shaffer
Chris Shaffer
12,030 Points

I've done your debugging for you: the problem is the challenge will not accept the answer without a space between the max-width and 1020px.

Here's the difference between the code that was not accepted and the code that was accepted - note that the only error given is that you need to check for the viewport size of 1020px. Both of these are correct.

Notice how it's not picky about the lack of a space before tomato or white.

@media (max-width:1020px) {
  .main-header {
    background-color:tomato;
    color:white;
  }

}

@media (max-width: 1020px) {
  .main-header {
    background-color:tomato;
    color:white;
  }

}
Anika Jaffara
Anika Jaffara
20,364 Points
Anika Jaffara
Anika Jaffara
20,364 Points

I'm having the same issue with the 2nd task here... I played with the spacing, and it won't pass.

@media (max-width: 1020px) { .main-header { background-color: tomato; color: white; }

@media (max-width: 768px) { .title { font-size: 1.4rem; } h1 { font-size: 5rem; }