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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Posted by Devin Auspland
Devin Auspland
699 Points

Skill challenge not working.

Its asking me to create a breackpoint of screens larger then 480px and change h1's font size to 2.5 em...

Here is my code:

@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  } 
}

Its telling me I'm wrong.

5 Answers

Konrad Pilch
Konrad Pilch
2,435 Points

You should put your code at the bottom of the code, not at the top. It will work then. It's a knowledge challenge xd

Devin Auspland
Devin Auspland
699 Points

I feel silly... should have known that haha. In the main code I put it in a separate CSS file so that wouldn't have mattered. Ohh you tricky treehouse ^_^

Konrad Pilch
Konrad Pilch
2,435 Points

Media queries go always at the bottom of the style-sheets. ^^

Konrad Pilch
Konrad Pilch
2,435 Points

Otherwise they will over-write them.

If you have e.g.

h1 red

and h1 blue

the h1 will be blue because its later in the style-sheets.

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

Try removing the screen off of your media query.

@media (min-width: 480px) { h1 { font-size: 2.5em; } }

Let us know if this works!

Devin Auspland
Devin Auspland
699 Points

This did not work, still saying bummer.

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

This is strange. I can't find any problems with your code whatsoever.

Devin Auspland
Devin Auspland
699 Points
Devin Auspland
Devin Auspland
699 Points

The full response is :

Bummer! Did you change the h1 font-size to 2.5em for devices larger than 480px?

Anthony Mejia
Anthony Mejia
8,840 Points

My only concern would be the placement of your code. If there's any default code that might override yours, make sure to add your code below it. Hopefully this helps!

Konrad Pilch
Konrad Pilch
2,435 Points

I wrote that. You just repeated me.

Michael Afanasiev
PLUS
Michael Afanasiev
Courses Plus Student 15,597 Points
Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Hey Devin,

Your code is correct, try adding it at the bottom of your css in the following format:

@media screen and (min-width: 480px) { 
  h1 { 
    font-size: 2.5em;
  } 
}
Konrad Pilch
Konrad Pilch
2,435 Points

The format doesn't matter.

In fact, the way he did it, is the recomended way because it contains only one thingy.. propertery the h1. If he had h1 and h2 or whatever more than two, it would be okay.

Konrad Pilch
Konrad Pilch
2,435 Points

Not to mention it was like yours but he didnt put the

```html

so it displayed in line lol

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Hey Konrad,

I know it does not matter, but some minor things in Treehouse challenges can either stop you or let you pass it.

Konrad Pilch
Konrad Pilch
2,435 Points

But its either right, so it shoudn't matter. Because it's not wrong, im sure in this challenge Nick would had this kind of variation.

Michael Afanasiev
Michael Afanasiev
Courses Plus Student 15,597 Points

Never said you were wrong :)