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
Rory Matthews
2,287 PointsIssue shown at 08:08 in video persists, even with fix described shortly thereafter.
Hi!
The text in my <li> elements is wrapping, increasing the height of some of them, pushing the element beneath it out the way. Nick describes a fix in the video by clearing every 4th <li> element but it doesn't work for me. Could it be because my images are square where his are landscape format rectangles?
Quick screencast showing issue: http://quick.as/lvy5hq5y
Files: https://space.zeo.net/z/y5d7
Any help is really appreciated.
4 Answers
Adam Sackfield
Courses Plus Student 19,663 PointsFigured it out. Look in your rsponsive.css file and you had placed the correct code in the wrong place. You had it on line 37. Where you should have in in the media query starting on line 42. To look like below
@media screen and (min-width: 660px) {
#gallery li:nth-child(4n) {
clear:left;
}
}
Then it will work
Adam Sackfield
Courses Plus Student 19,663 PointsI don't see the pseudo selector of
#gallery li:nth-child(4n) {
clear: left;
}
In your code. This is what you need to add inside the media query
Rory Matthews
2,287 PointsThanks for such a quick reply! If you're referring to the screencast, I add that into the code in at 00:13s, save, refresh and nothing changes.
Adam Sackfield
Courses Plus Student 19,663 PointsI was referring to your zip file??
Rory Matthews
2,287 PointsSorry, I should have said, the code in question is in /css/responsive.css!
Adam Sackfield
Courses Plus Student 19,663 PointsAh my bad. Will have a look now. Also try to keep your responses as comments rather than answers to keep it tidy. Let me have a look now and see what I can do :)
Rory Matthews
2,287 PointsAh. That is tidier! Thanks for your help so far.
Rory Matthews
2,287 PointsRory Matthews
2,287 PointsI'd actually tried that before but it doesn't seem to fix the problem. I looked again at the video lesson accompanying this and you can see that he is in fact putting
within
@media screen and (min-width: 480px) {}It's odd! It happens in the video at 10:00s
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsYes I see that now. On my browser (latest chrome) with the code I pasted in the answer, I am not getting the issue that Nick Petit is getting where the floats are failing. So I am unsure what is happening your end.
Rory Matthews
2,287 PointsRory Matthews
2,287 PointsIn my (extremely) uneducated opinion, it seems as if I should be clearing the 5th element instead of the 4th as it is the 5th picture which is being pushed out of the way by the 3rd as the caption text on the 3rd wraps to a second line (as in my screencast). That said, if I try
instead, it doesn't fix the problem either. I'm also on newest chrome so I have no idea what could be causing it!
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsHere is a video showing how it looks on my laptop. This is even without the answer above so I am baffled. Nothing is popping out.
Rory Matthews
2,287 PointsRory Matthews
2,287 PointsI reckon you might be looking at the wrong pictures when looking to see if they pop out. It seems like the same thing is happening in that video of yours as it is in mine. At 14s and 18s, you briefly see the final image (caption: Beach, Trondheim, Norway), pop out of its position, leaving a blank space to its left that shouldn't be there. I've recreated it in another video here http://quick.as/lrkvuolq
Rory Matthews
2,287 PointsRory Matthews
2,287 PointsAs it turns out, I think it's just a flaw in the code he writes for the lesson. The method he uses only works when the captions are the same lengths as his own (and thus wrap at the same window width). I downloaded the lesson's project files and substituted my images in without changing his captions. When I did this, the layout worked. As soon as I substituted his captions for my own as well, however, the layout breaks. Nice to know it isn't a problem I've caused, but I wish I knew how to fix it!
Rory Matthews
2,287 PointsRory Matthews
2,287 PointsThanks for all the help, really appreciate it!