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

Raghav Narang
Raghav Narang
7,336 Points
Posted by Raghav Narang
Raghav Narang
7,336 Points

Breakpoint area problem

I have one error Question is { Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint , set the h1 font-size to 2.5em.}

I wrote this codes in page but

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

Bummer! display {Be sure to use a responsive breakpoint to only change the h1 font-size when the device is wider than 480px.}

4 Answers

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

You have a slight syntax error in your media query, you need to remove the ';' from min-width: 480px for it to work :)

Raghav Narang
Raghav Narang
7,336 Points
Raghav Narang
Raghav Narang
7,336 Points

The Bummer again display error.
Error is { Did you change the h1 font-size to 2.5em for devices larger than 480px}

Grace Kelly
Grace Kelly
33,990 Points
Grace Kelly
Grace Kelly
33,990 Points

did you place the media query at the bottom of the code??

Raghav Narang
Raghav Narang
7,336 Points
Raghav Narang
Raghav Narang
7,336 Points

Now its working. Before I wrote in top that is why its not working. Thanks kelly

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

Try (min-width: 481px). It is asking for larger than 480px. Hopefully this helps :)

Ashley Wile
Ashley Wile
8,452 Points
Ashley Wile
Ashley Wile
8,452 Points

I just tried the task and added this code to the botttem of the code and it passed.

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

Tracy Trathen
Tracy Trathen
10,468 Points
Tracy Trathen
Tracy Trathen
10,468 Points

Hi Raghav

So you tried this?

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

And you did put this at the very bottom of the challenge making sure to change nothing else in the screen?

Edwin Neba'a Numfor
Edwin Neba'a Numfor
1,195 Points
Edwin Neba'a Numfor
Edwin Neba'a Numfor
1,195 Points

Sign out sign in again, then type this code

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

this worked for me.