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 Travis Dalhoff
Travis Dalhoff
21,035 Points

I'm having a hard time creating a breakpoint for devices over 480px and I'm not sure what I'm doing wrong.

I'm trying to create a breakpoint for devices over 480px and inside the breakpoint change the h1 font-size to 2.5em. The code I'm entering looks like the code I entered in Workspaces during the video but it doesn't pass the code challenge. I did notice the filename on the code challenge is css/main.css, not css/responsive.css as we did in workspaces during the video but I didn't see how to change it in the code challenge. Thanks!

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

1 Answer

andren
andren
28,558 Points
andren
andren
28,558 Points

There is technically nothing wrong with your media query or the selector within it, but later in the CSS file there is another rule that select the h1 element and sets it's font-size to 1.75em, that rule overrides the h1 rule you created in your media query, since it has the same specificity as your rule and media queries do not take precedent over normal rules specified in the CSS file.

That is why media queries are usually placed at the bottom of a CSS file, and in this instance moving the media query you created to the bottom of the file is all you need to do to pass this task.

Travis Dalhoff
Travis Dalhoff
21,035 Points

Thank you!