Breakpoints and Width

Question

For this code challenge and the last i cant seem to get the answer correct. In the last section it asked me to create a breakpoints. Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em was the instructions given and i cant find whats wrong. In this challenge it is asking me to set the list items to a width of 28.33333% which i did. What am i missing?

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) {

}

#gallery li { 
  width: 28.33333333%;
}

Answer 1 · 2016-11-01T02:45:38Z

November 1, 2016 2:45am

There are two problems with your current solution, the first is that the selector you create should be placed inside of the media query, you have placed it below the media query, which is incorrect. This is how the media query is meant to look:

@media screen and (min-width: 480px) {
  #gallery li { 
    width: 28.3333%;
  }
}

All CSS selectors that belong to a media query has to be placed within the opening and ending brackets of said media query.

The second issue is that the width value is incorrect, you have a couple more 3s than you are supposed to.

In the media query I added above I have fixed both of those issues, so if you go to the challenge and replace the media query and your own #gallery selector with the code above, then you will be able to pass the task.

Welcome to the Treehouse Community

Looking to learn something new?

Dex Owen

Dex Owen

Breakpoints and Width

1 Answer

andren

andren