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 Margot da Cunha
Margot da Cunha
688 Points

How do I get the second breakpoint to work? I'm inputting the same, but changing the dimensions and h1 to h2

I got the first breakpoint correct and the program keeps saying Bummer! for the second answer even though I'm using @media screen and (min-width: 660px) { h2 { font-size: 1.75em;}

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

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

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

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

3 Answers

Erik S.
Erik S.
9,789 Points
Erik S.
Erik S.
9,789 Points

Hi Margot, there are two closing brackets missing }. The rest is fine:

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

@media screen and (min-width: 660px) {
  h2 {
    font-size: 1.75em;
  }
}
Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

In addition, be sure to place this new code at the end of the CSS already supplied in the code challenge. Media queries should appear after other styles applied to the same element so they're not incorrectly overridden.

Erik S.
Erik S.
9,789 Points
Erik S.
Erik S.
9,789 Points

The brackets are missing at the end of each @media rule. In the code I have provided, after the line with the font-size, the first } closes the css rule and the second } the @media rule. Hope this helps.

To elaborate: You passed the first test with this markup:

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

but the correct markup is:

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

Thats why task 2 is not passing, because the @media rule for task one is not closed

Margot da Cunha
Margot da Cunha
688 Points
Margot da Cunha
Margot da Cunha
688 Points

Where are the closing brackets missing? I'm duplicating the answer from question one, but making the h2, font size, and min-width adjustments, but it keeps saying "Bummer!" I also moved it to the bottom of the css code?