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

sofia Heikkila Svensson
sofia Heikkila Svensson
3,695 Points
Posted by sofia Heikkila Svensson
sofia Heikkila Svensson
3,695 Points

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

Hi,

The respons is that I enetered wrong background-color.......

I cant move on,

Pls help

style.css 
/* Complete the challenge by writing CSS below */

@media  (max-width: 1020px)
  .main-header {
    background-color: tomato;
    font-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

Nick Rocha
Nick Rocha
7,876 Points
Nick Rocha
Nick Rocha
7,876 Points

Why did you use a id and class for the header tag?

I would check out this link to understand when to use id vs. class:

https://css-tricks.com/the-difference-between-id-and-class/

Also check out the color property for css

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

She used an Id attribute so that she can internally link the page's bottom back to top shortcut link to the top.

The course has that like this, she hasn't changed a thing with that.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You are missing brackets around your media rule.

There is no such property called font-color. It's just color.

 @media (max-width: 1020px) {

  /* Put code here */

}
Thomas Whitcho
Thomas Whitcho
8,408 Points
Thomas Whitcho
Thomas Whitcho
8,408 Points

Try and use the code below:

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

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

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

You shouldn't give direct answers to other students, have done so in the past and have been warned about it.

That's why my answer was to help the student understand clearly and not directly with a correct answer.

Providing a solution to the student doesnt help them learn any more of the concept in hand.

Just a tip incase you get a reply from a moderator.

Thomas Whitcho
Thomas Whitcho
8,408 Points
Thomas Whitcho
Thomas Whitcho
8,408 Points

Hii Jemie, Noted. Thank you for highlighting that to me. I never knew its not allowed. Will not do that going forward.

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

No problem! Yes I had a moderator warn me about it in the past as I previously gave students the solutions to challenges. It makes sense as they don't actually take any great information from it as it doesn't help them achieve anything in the long run of the learning process. You are welcome!