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

Troy Fletcher
Troy Fletcher
2,814 Points

Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.

Not letting me get it right

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

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

4 Answers

Troy,

Your curly braces are causing the issue. Remove the one at the top that is under media, and add another curly brace at the very bottom, under the closing curly brace closing your .contact-info selector.

Shawn Ramsey
Shawn Ramsey
27,237 Points

Matt has the correct answer since you later mentioned that all of the CSS is supposed to be in the media query in this particular task.

Shawn Ramsey
Shawn Ramsey
27,237 Points

You should declare your media queries at the bottom of your stylesheet.

Mark Pryce
Mark Pryce
8,804 Points

Shawn is right, keep in mind what 'cascading' means anything declared at the top of your CSS will be overwritten if the element is called further down your document.

Your second declaration of h1 font-size is taking priority because it's further down your stylesheet.

It's good practice to put media queries at the bottom (or in a separate document .. but you will learn that.)

Happy coding.

Is only the h1 supposed to be in the 480 pixels and larger media query? or is all of the posted CSS supposed to be in this media query?

Someone just posted a question very similar to this.

If you move the curly bracket to the bottom, you will have two h1 class selectors. The second one would be making the h1 1.75 em.

All of the CSS is supposed to be in the media query. This is a challenge, so the code is already there. I was referring the braces after the initial media query.

Troy Fletcher
Troy Fletcher
2,814 Points

Great, got it. You guys are the best, thank you!