HTML How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Andrey Leushin
Andrey Leushin
2,331 Points

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

I can't figure out how to do it? I write like this: font-size: 1.75em; I replaced the-font-size: 2.5em; @media screen and (min-width: 480px){ }

5 Answers

Ben Schroeder
Ben Schroeder
22,812 Points

Are you doing something like this? Because it should work:

@media screen and (min-width: 480px){
  h1 {
    font-size: 2.5em;
  }
}
Andrey Leushin
Andrey Leushin
2,331 Points

oh, thanks, I forgot about that

Voyti 1
Voyti 1
1,854 Points

Does it matter where you type this code in main.css? When I typed it in the beginning it was saying that it's wrong, when I typed it in the bottom of the main.css, exactly the same code - it was OK

Voyti 1
Voyti 1
1,854 Points

And now in the second task, where you have to change h2 font size to 1.75em, it says that it's incorrect: @media screen and (min-width: 480px) { h1 { font-size: 2.5em; { }

@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } }

Kayla Flynn
Kayla Flynn
6,309 Points

I'm having the same issue

Dimi Tri
Dimi Tri
946 Points

have the same problem. thats because in codechallenge css/main.css file opens. But it should be responsive.css :(

Dear Teamtreehouse , could u please fix it?

Lukasz Sadorski
Lukasz Sadorski
5,999 Points

Make sure you write your code at the bottom of all your CSS code. It should look like this:

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

@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } } ```