How come my breakpoint rule is not working for this Code Challenge that asks to create a breakpoint for devices 480px

Question

Here is my code:

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

Inside the breakpoint, it says to set the h1 font-size to 2.5em, which is what I did. I do not understand why it keeps telling me "Bummer! Did you change the h1 font-size to 2.5emfor devices larger than 480px?"

Any advice is appreciated on how to solve this issue. 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;
}

Answer 1 · 2017-01-15T13:29:48Z

January 15, 2017 1:29pm

People struggle with this task quite often, here is an answer I posted on a previous post asking for help with this challenge:

Your media query code is correct, but it's placement is not. In CSS the placement of rules matters somewhat when you have different rules of the same specificity that modify the same property.

In this challenge there is another rule that targets h1 elements and modifies their font-size property, since you place your media query at the top of the file it gets overridden by that rule farther down the page.

This is part of why it's common to place media queries at the bottom of CSS files. If you move your media query to the bottom of the file you will be able to pass onto task 2.

Welcome to the Treehouse Community

Looking to learn something new?

Bryan Banks

Bryan Banks

How come my breakpoint rule is not working for this Code Challenge that asks to create a breakpoint for devices 480px

1 Answer

andren

andren