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

Posted by Samit Sheth
Samit Sheth
4,172 Points

Trouble clearing images to the left, multi-line captions causing issues

I built a site with a layout very similar to Nick's here at www.samitsheth.com. The second page, the "family" page, is the page where I have images. I built it the same way, with the same responsive design, where at a min-width of 480px, i set the width of images to 28.3333% and clear every 4th picture to the left. However, I'm still running into issues where the captions become multi-lines, the images don't get cleared to the left. Any help is appreciated!

1 Answer

Colin Bell
Colin Bell
29,679 Points
Colin Bell
Colin Bell
29,679 Points

What's throwing it off is that first li's text wraps down before the others. Then you'll notice that when the second li's text wraps, it throws the layout off again.

To fix this you'll need to clear the first li left, then every 3rd li after that (1, 4, 7, ...)

Try this:

/* To fix the text wrap throwing off layout at smaller screens */
#family-pics li:nth-of-type(2n+1) {
  clear: left;
}

/* To fix the text wrap throwing off layout at larger screens */
@media (min-width: 480px) {
  /* Reset this or else it will still clear the first and every 2nd after */
  #family-pics li:nth-of-type(2n+1) {
    clear: none;
  }

  /* Clear the first li and every 3rd after */
  #family-pics li:nth-of-type(3n+1) {
    clear: left;
  }
}
Samit Sheth
Samit Sheth
4,172 Points

Thanks for the quick response! Will try and this and let you know how it worked. Seems to make sense though, very much appreciated!

Samit Sheth
Samit Sheth
4,172 Points

Used your advice here and played around with it some more and now it's working exactly how I wanted! Tons of help, thanks a lot.