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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

responsive.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
maayan malka
2,454 Points

question: 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) {...

Hi 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.

This 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?

I did and it is still doing it.

any ideas? I tried safari and chrome. http://cl.ly/image/0s14012k0S2l

http://cl.ly/image/0s14012k0S2l

When you see this problem is it when you have 2 columns of images or 3?

This is what I have. I finished the track and all of my code validates correctly.

gallery li:nth-child(4n) { clear:left;}

It happens during 2 column just before switching to three columns.

There 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
maayan malka
2,454 Points

thanks a lot Jason!

maayan malka
maayan malka
2,454 Points

thanks a lot Jason!