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 trialTristan Houtz
3,085 Pointsresponsive.css nth-child and 28.3333%
When I change my browser size, just before i can't make it any smaller (mobile). I still have one portfolio box that stays white. just wondering why/
8 Answers
maayan malka
2,454 Pointsquestion: why write CSS for the first layout in main.css and not write all the CSS in responsive? something like this: @media screen and (min-width: 10px) {...
Jason Anello
Courses Plus Student 94,610 PointsThis is still in the 3 column layout?
The previous video has a correction in the teacher's notes for :nth-child().
The correct expression is 3n + 1
Did you change it to that?
Tristan Houtz
3,085 PointsI did and it is still doing it.
any ideas? I tried safari and chrome. http://cl.ly/image/0s14012k0S2l
Jason Anello
Courses Plus Student 94,610 PointsWhen you see this problem is it when you have 2 columns of images or 3?
Benjamin Palladino
13,297 PointsThis is what I have. I finished the track and all of my code validates correctly.
gallery li:nth-child(4n) { clear:left;}
Tristan Houtz
3,085 PointsIt happens during 2 column just before switching to three columns.
Jason Anello
Courses Plus Student 94,610 PointsThere needs to be another :nth-child expression for the two column layout because the same problem occurs in both the 2 and 3 column layout. I don't think the 2 column solution is covered in the videos though.
In main.css you want to add :nth-child(2n +1)
:
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li:nth-child(2n + 1) {
clear: left;
}
That nth-child is only good for the 2 column layout. We don't want those same items clearing the floats in the 3 column layout. So we have to remove that clear property first before we clear the floats on the correct items for a 3 column layout.
In responsive.css:
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(2n + 1) {
clear: none;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
This should fix the layout problems for both the 2 and 3 column layout.
Let me know if you have any questions about it.
maayan malka
2,454 Pointsthanks a lot Jason!
maayan malka
2,454 Pointsthanks a lot Jason!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi maayan,
Not all devices support media queries. I'm not sure on mobile, but for desktop, ie8 and below do not support media queries. If you put all of your css inside media queries then those devices won't get any styling.
This course takes a "mobile first approach". You put all of your css for small mobile devices outside of any media queries. This way all small mobile devices as well as any devices that don't support media queries will get the mobile layout. Then as the screen gets larger the css is changed to take better advantage of the extra space.