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

WordPress WordPress Theme Development Starting a WordPress Theme WordPress Theme Development Course Overview

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

Foundation grid not working for 5 or more items

Hi, in the course WordPess Theme Development Zac is using Foundations's grid and inserts 10 images in it like this:

      <section class="row no-max pad">
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
        <div class="small-6 medium-4 large-3 columns grid-item">
          <a href="item.html"><img src=""></a>
        </div>
      </section>

Well, that's fine. With 10 images it looks great: 4 images in the first row, 4 images in the second row and 2 images (floated left) in the third row.

But what about if you insert only 5 images? Well, then you get 4 images in the first row - which is cool - but the fifth image floats right (!) in the second line. Is that how it should be?

I've also tried inserting 6 images. And what you get is 4 images in the first row and the fifth and sixth image in the second row - but the fifth one floated left and the sixth one floated right - so you have a blank space between them. Is that how it is supposed to be?

Is there a way to get - no matter how many images you insert - all nicely packed into the rows and have the remaining images floated to the left in the last row?

Thanks if you can help ... any time ... if you don't have the time this year I can wait till next year :)

Maja

2 Answers

Zac Gordon
STAFF
Zac Gordon
Treehouse Guest Teacher
Zac Gordon
Zac Gordon
Treehouse Guest Teacher

Do you have a link to an example? This may just be a CSS fix, or image size issue. If you check out the Bootstrap course there are some clever solutions for inserting break points within the loop for controlling that better using a counter. From what I tested though it seems to work okay.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

HI Zac,

Thanks for your quick answer. It took me some time to get back to you as in the meantime I've watched the whole From Bootstrap to WordPress course and really found the trick to use counter (its in the Creating a Portfolio Landing Page if someone is interested) to insert the end and the beginning of a new row after the desired custom post.

That functionality is really cool and it actually enabled me to go back to the basic grid.css used by Guil in the Course CSS Layout Techniques>Grid Layot. So far I manage to do everything with that grid and I do not need to use the Foundation as you do in the WP Theme Development course.

I've also taken a compromise to always fully fill the row with items (so if I have 4 items in a row I would always use 4, 8, 12, 16 etc items). I'm not very happy about it but for the moment I'm quite satisfied.

You ask me to show you an example. The example is the static page that is downloadable at the beginning of the WP Theme Development course. That one does not work if I for example insert 5 items (the fifth one floats right as I've already explained above). If I check the code with Chrome Inspector I can see that there is a row ended and a new one beginning after the fourth element. So I really do not know what could be wrong on my computer if on yours it is working.

In any case, thanks for giving me the idea to use counter, Maja