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

William Sanders
William Sanders
11,396 Points
Posted by William Sanders
William Sanders
11,396 Points

Don't understand what I'm doing wrong.

So I've looked at other code snippets on this post and compared it to mine. It looks similar. I've read through these post and troubleshot those issues and it didn't fix mine. Unless I overlooked something. Also, I did check the index.html and even tried targeting different classes but it still gives me the, "did you give .title the correct font-size?" error.

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: 1.4rem;
    }
 }
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>

3 Answers

Rob R
Rob R
14,637 Points
Rob R
Rob R
14,637 Points

Hi William,

You've mostly got it right but it looks like your first media query doesn't have a closing bracket. It also looks like your h1 is set to a different font-size than what they're asking for, so double check that as well.

Hope that helps!

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi William,

You left off the closing curly brace for your 1020px media query. This causes a parse error and the browser ignores all of the second media query.

The other issue is that the h1 should have a font-size of 5rem

William Sanders
William Sanders
11,396 Points
William Sanders
William Sanders
11,396 Points

Thanks guys! I looked at it with a fresh mind and saw the errors. Thanks for your replies! You're great!