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

CSS How to Make a Website Responsive Web Design and Testing Refactor the Layout

Herschel Greenspan
Herschel Greenspan
890 Points
Posted by Herschel Greenspan
Herschel Greenspan
890 Points

What did i do wrong here?

How did i mess this up?

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

#gallery li {
width: 28.3333%;

  @media screen and (min-width: 480px)} {

}

3 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ahh! ok. I didn't know exactly what your problem was. but in that case your code should look like this.

@media screen and (min-width: 480px) {
    #gallery li {
        width: 28.3333%;
    }
}
Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

The very end of your code is what I assume is the cuase for whatever problem you are experiencing.

#gallery li {
width: 28.3333%;

  @media screen and (min-width: 480px)} {

}

<!-- CHANGE TO THIS -->

#gallery li {
width: 28.3333%;
}

@media screen and (min-width: 480px) {

}
Herschel Greenspan
Herschel Greenspan
890 Points
Herschel Greenspan
Herschel Greenspan
890 Points

i tried that and its not working. its asking me if i added the width rule inside the break point? what does that mean?

damian celentano
damian celentano
3,822 Points
damian celentano
damian celentano
3,822 Points

it means the width rule inside/within the media queries {} do this:

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

}