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 Patrick Villano
Patrick Villano
2,420 Points

I can't seem to get the right code in for creating a h1 font size of 2.5em when the screen is 480px

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

3 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Patrick.

Your code is correct, but I'm going to guess that you are not putting it at the END of the CSS file. Media Queries need to go at the end, otherwise they risk being over-written because of the "Cascading" effect of CSS. If you make sure it is the last entry, you should pass.

Keep Coding! :)

Patrick Villano
Patrick Villano
2,420 Points

Hi Jason and Chad. Would you believe i first DID put it at the end, and got an incorrect response. Then i put it up near the top, and got another incorrect response. It finally worked when i put it under an h1 tag lower down in the code. Thanks for your responses. Cheers.

Patrick Villano
Patrick Villano
2,420 Points
Patrick Villano
Patrick Villano
2,420 Points

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

Chad Vinning
Chad Vinning
4,086 Points
Chad Vinning
Chad Vinning
4,086 Points

Your media query looks to be syntactically correct, but I'm wondering if something else is overriding your style. You can use the developer tools in your browser to trace back the styling on the element. If my hunch is correct, you may be having a specificity conflict and your styling isn't cascading in the right order.

Check to see if your h1 element isn't being selected via a class or id selector outside of the media query. These hold higher specificity and will override less-specificity selectors. Since you are selecting the h1 element via a type selector, it leads me to believe this might be the issue.