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 stephaniecharley
stephaniecharley
2,230 Points

Adding Breakpoints for Device Task #2

I keep getting the message "Bummer! Did you change the h2 font-size to 1.75em for devices larger than 660px?" Here is the code I am using:

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

What Am I doing wrong?

css/main.css 
a {
  text-decoration: none;
}

#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 (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }

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

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Stephanie,

The problem is you haven't closed out the media queries properly. You'll need a closing brace for your style and the media query in both cases, and you'll need a min-width media query for each one.

So you'll want something like this

@media screen and (min-width: 480px) {
  h1 {
    font-size: 2.5em;
  }
}  
@media screen and (min-width: 660px) {
  h2 {
      font-size: 1.75em;
  }
}
Misha Karas
Misha Karas
5,636 Points
Misha Karas
Misha Karas
5,636 Points

Darn 8 minutes to late... He is right though

tylerpostuma2
tylerpostuma2
5,175 Points
tylerpostuma2
tylerpostuma2
5,175 Points

Hey Stephanie,

You are super close! The only thing is that when you are wanting to create a break point for a device that is LARGER than 660px you want to do something like this:

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

When you use max-width, you are saying that any device larger than 660px will have this effect.

Hope this helps!

stephaniecharley
stephaniecharley
2,230 Points

Thanks, but I wonder if there is a bug with the task #2. I tried it with max-width and still got the error message.

Misha Karas
Misha Karas
5,636 Points
Misha Karas
Misha Karas
5,636 Points

Hey Stephanie,

The problem was that you forgot the closing tags on both media query's. These are both challanges so you can just copy and paste it.

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

  h1 {
     font-size:2.5em;
  }
}


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

    h2 {
        font-size:1.75em;


    }

}

Good luck with your studie!