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

Can anyone tell me why it says I have added this second 660px breakpoint incorrectly?

I thought I used the same syntax as the 440px breakpoint but it returned an error. HELP???

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

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! It's not so much that the 660 media query is wrong, it's that the media query above it was never properly closed. You opened that media query, added an h1 rule, but then never closed it with a closing curly brace. You also did the same thing in your 660 media query. When I type out my curly braces I never type an opening curly brace without immediately typing a closing curly brace. Then I type out what's supposed to belong inside in that place. This helps diminish the risk of forgetting to close it later.

Essentially, both of your media queries are missing a closed curly brace at the end.

Hope this helps! :sparkles:

Jennifer, Thanks very much for the answer. I added the curly braces at the end of each but it didn't approve those changes. Where am I supposed to add them? Rich

This is it with your suggested changes:

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

h1 { font-size: 2.5em; } }

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

h2 { font-size: 1.75cm; } }

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You corrected the closing curly braces, but you have now introduced a typo. In your original code, the h2 is set to 1.75em. But in your altered code, it's now set to 1.75cm. Note the difference between em and cm.

Hope this helps! :sparkles:

Jennifer, you are my hero! I have been studying this piece of code for hours and was ready to throw in the towel. You rescued me. Thanks very much, I really appreciate it. Rich