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 trialjulia dearden
691 PointsI keep on getting errors on my code—please help!
I keep on getting errors on the code challenge that states: "Now, clear the left side of every 4th list item in the element with the id of "gallery". Here's a hint: You'll need to write another selector inside of the media query at the bottom of the file, in addition to the one you wrote in the previous step. You'll also need to use the nth-child pseudo selector." I've looked at others' answers and have tried every little adjustment on my code, but I can't seem to find what's wrong with it. Please help!
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 {
max-width: 28.3333%;
}
#gallery li:nth-chi1d(4n) {
clear: left;
}
}
1 Answer
Benjamin Larson
34,055 PointsLook like you have child
spelled as chi1d
, which is actually quite difficult to see in the code editor.
#gallery li:nth-child(4n) {
clear: left;
}
Thanks for providing my confusing puzzle for the day haha
Chris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsChris Thomas
Front End Web Development Techdegree Graduate 34,909 PointsWow I was going back and forth trying to find the difference. That was tough to see!
Also, just to note, part 1 of the challenge states to set the width property not the max-width property. Both pass just fine but understand they're not the same thing.
julia dearden
691 Pointsjulia dearden
691 PointsHaha not sure how I managed that one... thank you!!
Balal Naeem
7,418 PointsBalal Naeem
7,418 PointsHow did you figure this out LOL
Benjamin Larson
34,055 PointsBenjamin Larson
34,055 PointsBalal Naeem I can't remember if I picked this one up after a couple close scans or if I resorted to "cheating" by using software that detects differences in text and compared it against my passing solution.
The more interesting question is how julia "managed that one", as she said. Typos are certainly not uncommon, but 'l' and '1' aren't close in proximity and I'm not sure what mental process or muscle memory would take your finger that far out of the way haha. But then again, I can easily get distracted by thinking about what's in the fridge and suddenly I've written several lines of code in the wrong programming language.