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

Melanie Chuaypradit
Melanie Chuaypradit
7,515 Points
Posted by Melanie Chuaypradit
Melanie Chuaypradit
7,515 Points

I am stuck on a media query code challenge; it's asking if I set the correct font-size for h1

I can't get past this code challenge and can't identify what I am doing incorrectly. It's asking to target h1 and set font-size to 5rem, which I did, but I can't move forward.

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>
Antonio Jaramillo
Antonio Jaramillo
15,604 Points

You actually added a period to h1, so the browser is searching for a class called h1, rather than just the h1 element.

Antonio Jaramillo
Antonio Jaramillo
15,604 Points

Nice one, Ronald. You beat me to it.

christofer serrano
christofer serrano
2,983 Points
christofer serrano
christofer serrano
2,983 Points

Omg I been stuck in the same thing for over 15 minutes. lol jesus I need to sharpen my mind :S

1 Answer

Ronald Pedagat
Ronald Pedagat
10,110 Points
Ronald Pedagat
Ronald Pedagat
10,110 Points

h1 isn't a class. So you wouldn't need a . in front of it.