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

John Wilson
John Wilson
11,739 Points
Posted by John Wilson
John Wilson
11,739 Points

The question wants me to target the h1 element and put the font-size to 5rem, what am I getting wrong?

@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>

5 Answers

Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

or you dont even need class in h1 tag

John Wilson
John Wilson
11,739 Points
John Wilson
John Wilson
11,739 Points

that was what it wanted: h1 {font-size: 5rem;}

thanks!

Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

Your h1 has a class main-heading so put .main-heading font-size 5rem

John Wilson
John Wilson
11,739 Points
John Wilson
John Wilson
11,739 Points

Yeah, I tried that before the question but I get an error message saying:

"make sure you're targeting 'h1' within the media query...

Hank Patton
Hank Patton
10,301 Points
Hank Patton
Hank Patton
10,301 Points

Target the h1 element instead of the .h1 class.

Denis Omerovic
seal-mask
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points
Denis Omerovic
.a{fill-rule:evenodd;}techdegree
Denis Omerovic
UX Design Techdegree Student 10,873 Points

I think that you don't need h1 class main-heading just h1 and in your css within media query write just h1 then set the font size to 5rem