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

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;
}
@media screen and (max-width: 480px) {
     h1 {
       font-size to 2.5em.
    }
}  ```

16 Answers

Hi Connor,

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

Make sure you add one missing bracket.

Hope that helps. :)

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

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

Put on the bottom

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

h1 { font-size: 2.5em; }

}

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

change to min-width

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

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

  h1 {
     font-size: 2.5em;
  }

}   <-------------------------------- missing bracket

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!

@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

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

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

Omg Thanks! <3333

Okay, Thanks.

hahahha thanks alot guys <3 I got it now.

Awesome! :smile:

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

'''@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

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; }

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..

Thank You Salman Akram Appreciate it.

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

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