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 Build a Three Column Layout

Joanna Kelley
Joanna Kelley
551 Points

When my page is mobile size, the third item is still shifted right...?

What am I missing? /************************************ TWO COLUMN LAYOUT *************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/************************************ PAGE: PORTFOLIO *************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n+1) { clear: left; }

}

Jayson Benavides
Jayson Benavides
1,020 Points

have you tried to put the #gallery li:ntn-child(n+1) { clear:left; } inside the media queries? i think the ntn-child code are used on tablet and desktop size.

Joanna Kelley
Joanna Kelley
551 Points

tried this as well, that didn't work either...

5 Answers

Charles Osterman
Charles Osterman
5,132 Points

I was having the same problem with mine and then I remembered the code is only targeting screen sizes greater than 480px; so it doesn't fix the problem when viewing mobile size. I don't know if this is the correct way to do this but I added this to the top of my responsive.css and it solved the problem:

@media screen and (max-width: 480px) {
    #gallery li:nth-child(2n + 1) {
    clear:both;
  }
}
Jayson Benavides
Jayson Benavides
1,020 Points

have you tried to put the #gallery li:ntn-child(n+1) { clear:left; } inside the media queries? i think the ntn-child code are used on tablet and desktop size on the tutorial.

Vance Rivera
Vance Rivera
18,322 Points

You can try a clear: both or if all else fails also use the :after suedo selector like this html #gallery li:nth-child(n+1):after { content: " "; clear: both; }. If you can give a sample of the code you are using that would be a little more helpful.

Joanna Kelley
Joanna Kelley
551 Points

the code sample is in the original question...

I tried this recommendation and still nothing. My "mobile" view of the gallery has two on the top row, then one image to the right, and two on the third row. Nothing I do seems to change it though I have changed the code around a bunch of different ways. I am clearly missing something.

/************************************ TWO COLUMN LAYOUT *************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/************************************ PAGE: PORTFOLIO *************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n+1) { clear: left; }

}

@media screen and (min-width: 660px) {

}

Vance Rivera
Vance Rivera
18,322 Points

Have you tried removing the float right or have you made sure you are selecting the right Dom element? Open up the Javascript console by pressing f12 then put in your selector to make sure you are targeting the right element in the Dom.

This might be a bit sloppy, but building on the comments here, this is what seemed to fix it for me, while still maintaining the fix for the three-column layout as well.

At top of responsive.css add:

#gallery li:nth-child(2n + 1) {
      clear: left; 
}

Then in the 480px media query, add that same exact selection (2n+1), and set clear to NONE, overriding that "clear left" and instead telling it not to clear anything for every 2n+1 that was applied earlier, since it is not relevant to this layout, then moving on to the clear:left for every (3n+1) as has already been explained. So it looks like:

#gallery li:nth-child(2n + 1) {
      clear: none;
  }

#gallery li:nth-child(3n + 1) {
      clear: left; 
}

I'm a newbie and there might be a much more elegant way of doing it, but this seems to work across all the resize thresholds...