Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Why is my media query function not working?

For my code challenge, I am trying to write media query code to change the h1 font-size to 2.5em. The condition here is for screens of width 480 pixels and above. The code I wrote was as follows:

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

2 Answers

Jesus Mendoza
Jesus Mendoza
23,287 Points

Hey Aladdin,

Is not working because you are telling the browser to apply that rule until the width of your screen is 480px.

The correct answer should be:

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

That way you are telling the browser that you want to apply that rule when the browser is at least 480px or above.

Good luck!

Thank you, Jesus,

I made a mistake in retyping the code. I did indeed use the exact code you sent with min-width instead of max-width. The problem persists. I am obviously new around with asking for help. I am almost 100% sure that my code is correct, but the challenge refuses to accept it and insists that I got it wrong. Could this be a system error? Do students normally face errors?

Another point that could be of relevance is the fact that I am typing out the media query in the main.css file. I do not have the option of adding another independent file like it was taught in the lesson. Could this be the reason?

Let me know your thoughts.

Thanks again for taking the time.

Same issue here. System is not accepting the code which supposed to be correct:

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

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

@TeamTreeHouse please take a look at this issue.