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 trialapril
690 PointsGetting a Bummer: Be sure you are only setting the width for every 4th list item.
There is a correction on this lesson and I input the corrected code. Have I done anything else incorrectly?
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.3333%;
#gallery li:nth-child(3n+1);
clear: left;
}
}
Austin Whipple
29,725 PointsIn CSS, semicolons are only ever used at the end of a rule declaration, so it goes:
property: value;
You shouldn't see them anywhere else. Some also say you can remove the semicolon from the last rule in a block of CSS. While valid, I'd recommend against it because it's a bit lazy and invites errors down the road.
april
690 PointsThanks for the semicolon lesson - I have copied and pasted it into my notes. I also agree with your lazy comment. I would rather just do it one way all the time.
1 Answer
Austin Whipple
29,725 PointsIt looks like you may be missing a bracket between the #gallery li
rules and the #gallery li:nth-child
rules.
Give this a shot:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(3n+1) {
clear: left;
}
}
april
690 PointsIt still does not work. I tried putting in the (4n) and that did not work.
I had to start all over several times.
Austin Whipple
29,725 PointsSo I just tried out the challenge and in addition to the bracket issue, the (4n) should do it. Try placing this code:
@media screen and (min-width: 480px) {
#gallery li {
width: 28.3333%
}
#gallery li:nth-child(4n) {
clear:left;
}
}
(Looks like there was also a rogue semicolon in my first example that I forgot to remove.)
april
690 Pointsapril
690 PointsThank you so much Austin !!! I gotta get this semicolon thing down pat. So many times it has tripped me up. I just do not understand when I need one and when I do not; and, then there are all the times I have just forgotten the semicolon at the end of something. Thanks again!