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 trialKevin Brennan
19,920 PointsCan'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
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
34,055 PointsHi 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;
}
Jennifer Nordell
Treehouse TeacherHi 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!
Kevin Brennan
19,920 PointsThanks Jennifer, lesson learned there I think, if in doubt restart the quiz!
Jennifer Nordell
Treehouse TeacherJennifer Nordell
Treehouse TeacherBenjamin Larson that's a really great catch! I could not spot that difference! Those are some nice eagle eyes
Benjamin Larson
34,055 PointsBenjamin Larson
34,055 PointsI 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
19,920 PointsKevin Brennan
19,920 PointsThanks 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.