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 Refactor the Layout

Kevin Brennan
Kevin Brennan
19,920 Points
Posted by Kevin Brennan
Kevin Brennan
19,920 Points

Can't pass Refactor the layout challenge part 1 in the How to Make a Website track

The challenge asks this:

Challenge Task 1 of 2

At the bottom of this CSS file is a media query. Inside the media query, create a selector that chooses all list items that are nested inside the element with the id of "gallery". Then, inside your newly written selector, set the width property to a value of 28.3333%.

I'm probably doing something stupid or it might actually be a bug as I can't see anything wrong with my code compared to the previous lesson. Any help would be most appreciated.

Thanks

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 li {
  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.3333%;
  }
}

2 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Hi Kevin -

Your code within the media query is correct. Did you perhaps try to edit the original #gallery selector first? It looks like you added the list items to the original #gallery selector, which is what's causing the problem. Just remove the extra li selector so that section goes back to this:

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

I sort of cheated on that haha. I narrowed it down to a problem above the media query but I couldn't spot it either so I used software to compare text and find any differences.

Kevin Brennan
Kevin Brennan
19,920 Points
Kevin Brennan
Kevin Brennan
19,920 Points

Thanks ever so much Benjamin, that worked! I have no idea how it happened, the challenge workspace can be very picky about spacing, blank spacing etc and I do remember that I deleted in then typed it in again. Perhaps I started typing a part of it in the wrong place.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there, Kevin! First and foremost, you're not doing anything "dumb". I can reproduce the error, but I can't explain it exactly. When I take all of your code and paste it in, it fails. This suggests that maybe something was changed previously in the file? But I can't spot the difference. However, if I restart the challenge and simply paste in the #gallery li rule you've included in the media query inside the media query they started, it passes with flying colors!

Give this technique a shot and see if it will get you through to the next step! :sparkles:

Kevin Brennan
Kevin Brennan
19,920 Points
Kevin Brennan
Kevin Brennan
19,920 Points

Thanks Jennifer, lesson learned there I think, if in doubt restart the quiz!