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

Posted by dzttnnlmgq
dzttnnlmgq
2,432 Points

[Solved] Incorrect Media Query?

Hello,

I am currently following the Front-End Web Development track, I am on the 'CSS Basics' section learning about media queries. I have been tasked to do the following: "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."

The below code is my css, the second media query is my response to this task, however, as I attempt to check the work it replies with "Bummer! Did you specify the correct font size for the h1?". I'd appreciate it if anyone could point out what I have done wrong, I could swear its all correct but hey ho.

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

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

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

Thanks, Leon.

M Glasser
M Glasser
10,868 Points

h1 tags don't require the '.' symbol since they are html elements. the period is reserved for class selectors e.g. .main-header, .main-content, etc. h1 are html elements so it's fine to drop off the period and just use "h1" for your "element" selector (vs. class selectors)

Matthew Lawson
Matthew Lawson
7,283 Points

Hey Leon,

It seems that you were trying to target a class by using ".h1" - if your correct this code to be just "h1 {..." as below it should start working. 

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

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

 h1 {
   font-size: 5rem;
  }
}

Hope this helps.

Matt

Carla Sottosanti
Carla Sottosanti
6,830 Points

You're welcome Leon!

2 Answers

Carla Sottosanti
Carla Sottosanti
6,830 Points

Hi, it asks you to target the element "h1", and according to your code you target the class h1 when you write ".h1". Maybe that´s the problem there.

dzttnnlmgq
dzttnnlmgq
2,432 Points

Thank you very much Carla! That worked perfectly. What a silly little mistake to make!

Leon.

Ryan M
Ryan M
17,492 Points
Ryan M
Ryan M
17,492 Points

Your selector for the h1 is a class selector '.h1' this should be en element selector (without the .) 'h1'

h1 {
  font-size: 5rem;
}
dzttnnlmgq
dzttnnlmgq
2,432 Points

Thank you!

I've fixed the issue now!

Leon.