Menu icon Foundation
archive grid, 12-column grid issue

hello! i've recently added enough posts to get my archive grids to create a new row. however, when I jump between large-3 and medium-4, the content gets too wide for the large-3 before it translates down to medium-4, leaving me with weird 1 post rows. any ideas? see image and code.

PHP

    <div class="row archive-grid" data-equalizer> <!--Begin Row:--> 

<?php endif; ?> 

		<!--Item: -->
		<div class="large-3 medium-4 small-12 columns panel" data-equalizer-watch>
		
			<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
                <section class="featured-image" itemprop="articleBody">
					<?php the_post_thumbnail('full'); ?>
				</section> <!-- end article section -->
			
				<header class="archive-text">
					<h4 class="title"><a class="archive-image-title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
            </header> <!-- end article header -->
			</article> <!-- end article -->
			
		</div>

CSS

archive-grid12 columnFoundation Grid

hello! i've recently added enough posts to get my archive grids to create a new row. however, when I jump between large-3 and medium-4, the content gets too wide for the large-3 before it translates down to medium-4, leaving me with weird 1 post rows. any ideas? see image and code.

PHP

    <div class="row archive-grid" data-equalizer> <!--Begin Row:--> 

<?php endif; ?> 

		<!--Item: -->
		<div class="large-3 medium-4 small-12 columns panel" data-equalizer-watch>
		
			<article id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">
                <section class="featured-image" itemprop="articleBody">
					<?php the_post_thumbnail('full'); ?>
				</section> <!-- end article section -->
			
				<header class="archive-text">
					<h4 class="title"><a class="archive-image-title" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
            </header> <!-- end article header -->
			</article> <!-- end article -->
			
		</div>

CSS

Roy Six over 2 years ago

Hi, archive-grid seems to be a feature from a Foundation WordPress theme; I don't think it is in vanilla foundation-sites (I just wanted to mention that to avoid any confusion).

Since I don't have access to your code, I'm going to make a couple assumptions:

  • You think it's weird that your second "row" thumbnail is starting from the right side (not the left side)
  • Your row is 12 columns wide
  • Each thumbnail gets a large-3 / medium-4 / small-12 class applied to it

If that is incorrect, you can stop reading here and clarify.

Now, if you end up having four thumbnails, on large screens they can all fit on one row (4 * 3 = 12). But on medium you'll have a problem because you've now gone above the 12 columns (4 * 4 = 16).

In reality, you don't really have a second row being made -- everything is still contained in that one row div you've defined, so foundation will "wrap" the next item (thumbnail) that can't fit on the bottom. It therefore appears like it's a second row, but it's now floating to the right. Actually, Foundation does just that for the last column child of a row: 

.column:last-child:not(:first-child), .columns:last-child:not(:first-child) {
    float: right;
}

So, foundation is doing exactly what it is being told to do. But you probably didn't mean that, so you kind of have to reword it in another way foundation understands.

It may be that you want there to be 4 thumbnails per row on large screens, 2 thumbs on medium, and maybe just 1 thumb per row on small screens. If so, I'd recommend you to use Foundation's Block Grid classes (large-up, medium-up, and small-up) so you can specify how many thumbnails you want in each row.