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 Nicholas Sallee
Nicholas Sallee
11,931 Points

Next, create a new media query that targets all devices when the viewport width is 768px or narrower. correct answer?

It keeps asking me did I specify the correct h1 font-size, I'm relatively sure that i have written the code correctly.

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

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

4 Answers

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points

I don't know what it's supposed to be set to, but 5rem feels pretty large.

Sara Cavazos
Sara Cavazos
10,898 Points

The challenge is asking us to do this:

"target the h1 element and set its font-size to 5rem"

Zimri Leijen
Zimri Leijen
11,835 Points
Zimri Leijen
Zimri Leijen
11,835 Points 
.h1 {
    font-size: 5rem;
  }

get rid of the dot, since h1 is not a class.

Sara Cavazos
Sara Cavazos
10,898 Points

Oh, wow! Thank you for pointing that out! I even went through the html code looking and I guess because my eyes saw the h1 has a class attribute, but my brain crossed wires and said "okay, the h1 is a class". Thanks again!

Carlos Felfle
Carlos Felfle
2,751 Points
Carlos Felfle
Carlos Felfle
2,751 Points

I am having the same problem, it is telling me "Bummer: Did you specify the correct font size for '.title'?" and it is 1.4. if I change the number the text in the preview changes so I know the code is correct But it is not recognizing the correct answer

Zimri Leijen
Zimri Leijen
11,835 Points

1.4rem?

Sara Cavazos
Sara Cavazos
10,898 Points
Sara Cavazos
Sara Cavazos
10,898 Points

I'm having this same issue. I don't understand what I'm doing wrong because I'm coding exactly what it's asking me to. I'm afraid that this will prevent me from completing my pre-work 100% before the due date..