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

General Discussion Responsive Layout

Responsive Layout - Trouble clearing floats at multiple breakpoints

Hi there,

I'm having a bit of trouble clearing floats at certain breakpoints so that my unordered list "Portfolio" of list items line up correctly. They contain an image, a title, and a caption below that of a varying heights so that by default float behavior they don't line up quite correctly.

I need a mobile (320px and one column), tablet (768px and two columns), and desktop (1024px and three columns) layout.

The layout part I think I have implemented just fine. Mobile stacks each item on top of one another perfectly. For the tablet it was my understanding that I should clear the left float every (2n+1) child so that after every two items a new "row" starts. For the desktop it was my understanding that I should clear the left float every (3n+1) child so that every three items a new "row" starts. This works fine in each individual case but if I implement all then only the earlier implemented one, in this case mobile, then tablet, then desktop takes precedence even though the other styles in the media query are working.

Here's some code to make it easier:

HTML:

<!-- Portfolio -->
        <section id="portfolio">
          <div class="container clearfix">
            <h2 class="section-name">Portfolio</h2>

            <hr class="section-hr">

            <ul class="portfolio-gallery">

              <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-1.png">
                <h3 class="portfolio-title">Marketing Page</h3>
                <p class="portfolio-info">This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
              </li>

              <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-2.png">
                <h3 class="portfolio-title">Search Page</h3>
                <p class="portfolio-info">This project searches through a specific database to find information the user is trying to look up.</p>
              </li>

...

            <li class="portfolio-item">
                <img class="portfolio-img" src="assets/img/portfolio-15.png">
                <h3 class="portfolio-title">Mail Server Program</h3>
                <p class="portfolio-info">This program provides full email functionality for you and your small business.</p>
              </li>

            </ul>

          </div>
        </section>

SASS/CSS:

  .portfolio-gallery {
    list-style: none;
    padding: 0;
    margin: 0;
    .portfolio-item {
      float: left;
      width: 95%;
      margin: 2.5%;

      .portfolio-img {
        max-width: 100%;
      }
      .portfolio-title {
        color: $teal;
        text-align: center;
      }
      .portfolio-info {
        color: $charcoal1;
        text-align: center;
        font-weight: 300;
      }
    }

/** ================================================== **/
/**
 =========================
 Media Queries
 =========================
 **/

 /***** Mobile *****/
 @media screen and (min-width: 320px) {
   #header {
     .profile-pic {
       width: 100%;
     }
   }
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {

       }
       .portfolio-item:nth-child(1n+1) {
         clear: left;
       }
     }
   }
 }

@media screen and (min-width: 768px) {
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {
         width: 45%;
       }
       .portfolio-item:nth-child(2n+1) {
         clear: left;
       }
     }
   }
}

@media screen and (min-width: 1024px) {
   #portfolio {
     .portfolio-gallery {
       .portfolio-item {
         width: 28.3333%;
       }
       .portfolio-item:nth-child(3n+1) {
         clear: left;
       }
     }
   }
}

I think that covers most of the code. Anyway, with this code only the nth-child(1n+1) clear is taking effect. If I remove it, then the (2n+1) does, and if I remove that then the (3n+1) does. Each one by itself works perfectly but together I can't figure out why it's not changing right at the breakpoints.

2 Answers

jared eiseman
jared eiseman
29,023 Points

I think maybe you're working this out a little more complicated than is necessary.

If you set the width of each portfolio-item to say, 33% minus some margin or padding for the desktop view, each item will automatically wrap to the next "line" after 3. Just need a clearfix at that point and boom, done. Don't need to do manual clears or anything.

Well that's what I did do. I have 2.5% margins so I set the width to 28.3333% and that works fine with desktop view when u clear every 3n+1.

The issue is when I set both the tablet and the desktop to clear, unsteadiness if changing based on breakpoint, only one takes effect.

I agree that whilst the tablet break point gave two columns, they would break sometimes as the text in one div would extended further down than any of the other divs (causing the break).

To stop the clear attribute from the tablet media query when writing the desktop media query, I included:

your_class:nth-child(2n+1) {
  clear: none
}

In the desktop media query to undo its effects.

I appreciate this comment comes well after it was posted.