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

Nenad Jovic
Nenad Jovic
7,883 Points
Posted by Nenad Jovic
Nenad Jovic
7,883 Points

Can someone help me with this challenge

Can someone help me out just to pass this one, can't search for solution my brain is burning, just to complete this track.

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>
Michael Lennartsson
Michael Lennartsson
7,263 Points
Michael Lennartsson
Michael Lennartsson
7,263 Points

I did the same today, your code looks good I think. I tried it again and here is my code that passed:

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

Regards, Michael

3 Answers

haunguyen
haunguyen
14,985 Points

I am just reusing your code here, but it works for both tasks

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

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

h1 {font-size:5rem;}

haunguyen
haunguyen
14,985 Points

no problem, it is difficult to understand from the way some of these challenges are asked?

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

I've been trying to pass this stupid thing for a few days. The challenge is broken. The code I've entered is exactly as what you have above but it won't accept it.

I do development professionally so I didn't even need the video; I'm just trying to complete this to have my track complete. It refuses to accept this answer.

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

I just figured it out. If there isn't a space between max-width and 1020px it won't pass. That's ridiculous.