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

Julie Roadnight
Julie Roadnight
2,856 Points
Posted by Julie Roadnight
Julie Roadnight
2,856 Points

CSS Basics the last challenge task

I'm stuck on the last challenge task of CSS basics.

The question is;

Create a media query that targets all devices when the viewport width is 1020px or less. Inside the media query, select the .main-header element. Set the background color to tomato and the text color to white.

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

This has been correct, however the following bit is where I'm stuck.

Next, create a new media query that targets all devices when the viewport width is 768px or narrower. Inside the media query, target the .title element and set the font-size to 1.4rem. Finally, target the h1 element and set its font-size to 5rem.

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

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

    .h1{
    font-size: 5rem;
    }
  }

I don't know where I'm going wrong. Can anyone help?

Radoslav Georgiev
Radoslav Georgiev
10,711 Points

h1 element is not a class

3 Answers

Julie Roadnight
Julie Roadnight
2,856 Points
Julie Roadnight
Julie Roadnight
2,856 Points

Thank you both so much!

andren
andren
28,558 Points
andren
andren
28,558 Points

You are missing a closing curly bracket in your first media query, you open the media query code block, but never close it. Also you have a dot before the h1 element, even though it is not a class.

Just add an ending curly bracket, and remove the dot like this:

@media (max-width: 1020px) {
  .main-header{
    background: tomato;
    color: white;
  }
}
@media (max-width: 768px) {
  .title{
    font-size: 1.4rem;
  }

  h1{
    font-size: 5rem;
  }
}

And it should work.

Carlos Martinez
Carlos Martinez
10,660 Points
Carlos Martinez
Carlos Martinez
10,660 Points

Your h1 does not need a period(.) Remove that and you should be fine.