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

Posted by Jeff Mauro
Jeff Mauro
5,374 Points

Media Queries for CSS

CSS > Designing with the Latest Features > Media Queries

I received the message below for Step#14: Code Challenge 2 of 2. I put 1.4rem as instructed, so I don't understand the error message below. Can you please review and advise? Thank you! ( < :

Bummer! Did you specify the correct font size for '.title'?

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

@media (max-width: 768px) {
  .title {
    font-size: 1.4rem;
  }
  h1 {
    font-size: 5rem;
  }
style.css 
/* Complete the challenge by writing CSS 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;
  }
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>

7 Answers

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Probably missing another curly under main-header class.

@media (max-width: 1020px) {

  .main-header {
    background-color: tomato;
    color: white;
  }

} 

@media (max-width: 768px) {

  .title {
    font-size: 1.4rem;
  }

  h1 {
    font-size: 5rem;
  }

}

Hope this will work this time :)

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Jeff,

It looks good but one missing end closing curly }

/* Complete the challenge by writing CSS 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;
  }

}  \\ this is closing curly.
Jeff Mauro
Jeff Mauro
5,374 Points
Jeff Mauro
Jeff Mauro
5,374 Points

I added the curly at the end of the code, but am still getting the same error message below:

Bummer! Did you specify the correct font size for '.title'?

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

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

}
Jeff Mauro
Jeff Mauro
5,374 Points
Jeff Mauro
Jeff Mauro
5,374 Points

Yes, it worked. Have a wonderful holiday!

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Glad to help solving matters, I hope you really enjoy here, keep it up!

Wish you Merry Christmas and New Year to you as well :)

Maria Stommes
Maria Stommes
17,140 Points
Maria Stommes
Maria Stommes
17,140 Points

I think there is something weird going on with this code challenge. I keep getting error messages as well and I even copied and pasted what is here.

Jeff Mauro
Jeff Mauro
5,374 Points
Jeff Mauro
Jeff Mauro
5,374 Points

In the part below where it says "font-siz: 1.4rem;", I tried the 1.4 many times without succeeding, wondering what was the matter. Then I tried different amounts like 1.1, 1.2, 1.3, 1.4, 1.5. Finally I got it through when I tried 1.5. I just did this a few minutes ago and passed the challenge. Try this and see if it helps. Let me know how it works out.

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