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

Ben Gerardo
Ben Gerardo
1,906 Points
Posted by Ben Gerardo
Ben Gerardo
1,906 Points

Placement of breakpoint

I know how to write the code for the breakpoint, but it seems anywhere I insert it is incorrect.

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)
{font-size: 2.5em;}

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

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

It should be placed at the bottom and you need a second set of curly braces

@media screen and (min-width: 480px) {
  h1 {
    color: #000;
  }
}

Happy coding.

Edit: my h1 rule is just an example.

Ben Gerardo
Ben Gerardo
1,906 Points
Ben Gerardo
Ben Gerardo
1,906 Points

Mark- I tried it at the bottom and it still doesn't work. Thanks for trying- Ben

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

Did you use a second set of braces? Like my example, Then it should work let me know :)

Ben Gerardo
Ben Gerardo
1,906 Points
Ben Gerardo
Ben Gerardo
1,906 Points

I did exactly like yours and it still won't work-Ben

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

OK I think I spotted your issue, in your normal h1 rule your font-family

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

/* I belive should be */

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

Hope it helps let me know :)