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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Issue 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

Figured 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

I'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

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

within

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

It's odd! It happens in the video at 10:00s

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

In 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

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

instead, it doesn't fix the problem either. I'm also on newest chrome so I have no idea what could be causing it!

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

I 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

As 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!

Thanks for all the help, really appreciate it!

I 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

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

I was referring to your zip file??

Sorry, I should have said, the code in question is in /css/responsive.css!

Ah 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 :)

Ah. That is tidier! Thanks for your help so far.