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 trialJoanna Kelley
551 PointsWhen 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; }
}
Joanna Kelley
551 Pointstried this as well, that didn't work either...
5 Answers
Charles Osterman
5,132 PointsI 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
1,020 Pointshave 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
18,322 PointsYou 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
551 Pointsthe 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
18,322 PointsHave 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.
James Yerkes
9,556 PointsThis 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...
Jayson Benavides
1,020 PointsJayson Benavides
1,020 Pointshave 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.