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 Connor Baker
Connor Baker
586 Points

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

I honestly don't understand how to do this! Someone help me !

css/main.css 
a {
  text-decoration: none;
}
@media screen and ( min-width: 480px ) {

  h1 {
     font-size: 2.5em;
  }



}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}
stef22
stef22
5,354 Points 
@media screen and (max-width: 480px) {
     h1 {
       font-size to 2.5em.
    }
}  ```

16 Answers

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Hi Connor,

You need to place this media queries on the bottom, not top.

Make sure you add one missing bracket.

Hope that helps. :)

Nelson J
Nelson J
7,411 Points

why do they have to be at the bottom? the teacher didn't explain that.

Ben Ragsdale
Ben Ragsdale
14,187 Points
Ben Ragsdale
Ben Ragsdale
14,187 Points

You have to put the media query code at the bottom of the other CSS code. Because it 'cascades', your current h1 code below the media query is overwriting the media query code.

Gabriel Hubermann
Gabriel Hubermann
5,700 Points
Gabriel Hubermann
Gabriel Hubermann
5,700 Points

Put on the bottom

@media screen and ( min-width: 480px ) {

h1 { font-size: 2.5em; }

}

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

I put the code

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

at the bottom and hit and i still got errors

Ben Ragsdale
Ben Ragsdale
14,187 Points

change to min-width

Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Actually, you should add your code with one missing bracket.

@media screen and ( min-width: 480px ) {

  h1 {
     font-size: 2.5em;
  }

}   <-------------------------------- missing bracket
Nicolas Daniel
PLUS
Nicolas Daniel
Courses Plus Student 3,030 Points
Nicolas Daniel
Nicolas Daniel
Courses Plus Student 3,030 Points

Tnx guys for your suggestion:

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

@media screen and (min-width: 660px) { h2 { font-size: 1.75em; } Placed at the very bottom of your ccs code works like magic!

adityasayre
adityasayre
3,496 Points
adityasayre
adityasayre
3,496 Points

@joshua campbell

@media screen and (min-width: 480px) { h1 { font-size: 2.5em; }you forgot h1 ending curly bracket here ""}""

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

Kel Kni
Kel Kni
1,577 Points
Kel Kni
Kel Kni
1,577 Points

It would be better if it specified: place @ the bottom of the page.

Scott Delman
Scott Delman
5,436 Points

That worked for me.. but I may have missed something.... why does it have to be a the bottom of the page?

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

Omg Thanks! <3333

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

Okay, Thanks.

Connor Baker
Connor Baker
586 Points
Connor Baker
Connor Baker
586 Points

hahahha thanks alot guys <3 I got it now.

Salman Akram
PLUS
Salman Akram
Courses Plus Student 40,065 Points
Salman Akram
Salman Akram
Courses Plus Student 40,065 Points

Awesome! :smile:

Phil Starr
Phil Starr
3,149 Points
Phil Starr
Phil Starr
3,149 Points

great thanks guys, at least my code was correct, just in wrong place

surajgantedi
surajgantedi
8,555 Points
surajgantedi
surajgantedi
8,555 Points

'''@media screen and (min-width:30em) { h1{ font-size:2.5em } }'''

Try this.... I referred to css-tricks.com, seems like we should set em instead of px

joshua campbell
PLUS
joshua campbell
Courses Plus Student 1,611 Points
joshua campbell
joshua campbell
Courses Plus Student 1,611 Points

hey guys! what am i doing wrong :-/

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

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

joshua campbell
joshua campbell
Courses Plus Student 1,611 Points

the directions are: After the first breakpoint, create a second breakpoint for devices 660 pixels wide or larger. Inside the breakpoint, set the h2 font-size to 1.75em..

Bryson Coles
Bryson Coles
1,067 Points
Bryson Coles
Bryson Coles
1,067 Points

Thank You Salman Akram Appreciate it.

Sandeep Krishnan
Sandeep Krishnan
9,730 Points
Sandeep Krishnan
Sandeep Krishnan
9,730 Points

mine was not working until I put it in the end

Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points
Mary-ashley Holtz
Mary-ashley Holtz
2,398 Points

Sandeep, I received the "bummer" error at first, because I was placing this code at the top of my CSS page. Can you explain to me why it has to be at the bottom? Does this CSS break point just have to be after the H1 code? Or does it have to be placed at the bottom?

Thanks! Mary-ashley