Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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;
  }
}

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

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.