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

it's still stuck on it being tomato

it still will not accept tomato as background

style.css
/* Complete the challenge by writing CSS below */
@media(max-width:1020px){.main-header
}
.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>

4 Answers

Hi Kim,

Could you copy/paste what you have now for style.css so I can see if maybe there is a hard to see typo or something of the sort?

Thanks, Randy

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

Hi Kim,

Looking at the code in style.css, we have a couple different things going on. First inside of the media query, we have the class .main-header, but we haven't done anything to it inside of the media query. The styles you put on it were outside the media query.

The second bug we have going on is that background-color and color are both CSS properties, which follow the syntax: property: value; For example the background color should look like background-color: tomato;, and the color property should look similar.

As kind of a generic template, it should look kind of like:

@media( max-width: 1020px) {
    .css-selector {
        property-1: value;
        property-2: value;
    }
} 

Hope this helps!

it is still sticking randy? i've tried the exact layout you gave? thank you

randy layne, it worked but it's sticking on the h1 element. i've tried everything. i've only got until 11:59 to finish this. could you help me please? i've had so many problems with internet connection and other issues, i'm afraid i'll lose the chance to get into code Louisville thank you for all your help

Ok, so in your new example, you are still trying to add the styles to main-header outside of your media query, instead of inside of it. I'll go ahead and write everything up to the background-color so you can better see what I'm talking about. You will just have to add in the color property.

@media(max-width: 1020px) {
    .main-header {
        background-color: tomato;
        /* now just add your color declaration here */
    }
}

Also notice how each selector and property is on a new line, while you don't technically have to do it this way, it makes it a lot easier to catch potential bugs and typos.

thank you randy Layne. I think i'm going blind from all this programming.