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.

CSS Build a Responsive Website Responsive Design Content Defined Breakpoints

Within that same media query, add the appropriate CSS to increase the size of the level one header to 2.75em

This is the current code in my media query. My code to change the level one header is incorrect. How can I fix this so that it will change the size of the h1 header to be 2.75em when the screen resolution is at 705 px?

@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }

#intro img { display: none; }

#nav ul li.h1 { width: 100%; margin: 0; font-size: 2.75em; } }

3 Answers

Stone Preston
Stone Preston
42,016 Points

since the question says Within that same media query, add the appropriate CSS to increase the size of the level one header to 2.75em, why not try

h1 { font-size: 2.75em; } 

instead of

#nav ul li.h1 { width: 100%; margin: 0; font-size: 2.75em; }

No luck. The extra bracket is closing the media query.

Stone Preston
Stone Preston
42,016 Points

ok just took the challenge and it looks like you are using the wrong selector. see my updated answer

That worked! I tried almost that exact code but had a # in front of h1. Thank you!

Stone Preston
Stone Preston
42,016 Points

glad you got it working : )