Repeater Fields Awkward Display

• johnhillcoat

• November 25, 2013 at 6:07 pm

I am using a repeater field to display recipe categories on a page. The first group ‘Ozganics Recipes by Meal Type’ displays fine. But I went to reorder the recipe categories in ‘Ozganics Recipes by Product Type’ which display further down the page. This has left gaps which I cannot find a way to close.

See http://ozganics.swwireframes.com/recipes/ to see what I mean.

The code for the page template is

<?php
/*
 * Template Name: Recipe Front Page
 */

get_header();
remove_action('genesis_loop', 'genesis_do_loop');
add_action( 'genesis_before_entry', 'genesis_do_breadcrumbs' );

// Do the Custom Loop
add_action( 'genesis_loop', 'meals_custom_loop' );
 
function meals_custom_loop() {
?> <p class="recipe-page-title">Ozganics Recipes by Meal Type
 <?php

while ( have_posts() ) : the_post();

if(get_field('recipe_meal_type')):

	while(has_sub_field('recipe_meal_type')): ?>
		<div class="recipe-display1">
		<p class="tx-c recipe-name-main"><?php the_sub_field('meal_type_title'); ?>

		<img src="<?php $image = get_sub_field('meal_type_image'); echo $image['sizes']['rep-img']; ?>" width="240" height="240" class="center recipe-front-image" />
		<div class="inner">
			<p class="tx-c margt10 margb20"><a href="<?php the_sub_field('meal_page_link'); ?>"><img src="http://ozganics.swwireframes.com/wp-content/uploads/2013/11/browse-recipes-recipespageadj.jpg" alt="Visit recipes" width="147" height="15" class="center margt30" /></a>

		</div>
	</div>

	<?php endwhile; ?>

	<?php endif;
endwhile;
?><div style="clear:both"></div><?php
}

// Do the Custom Loop
add_action( 'genesis_loop', 'products_custom_loop' );
 
function products_custom_loop() {
?> <p class="recipe-page-title">Ozganics Recipes by Product Type
 <?php

while ( have_posts() ) : the_post();

if(get_field('recipe_master')): 
while(has_sub_field('recipe_master')):?>
		<div class="recipe-display1">
		<p class="tx-c recipe-name-main"><?php the_sub_field('product_type_title'); ?>

		<img src="<?php $image = get_sub_field('product_type_image_for_recipe'); echo $image['sizes']['rep-img']; ?>" width="240" height="240" class="center recipe-front-image" />
	
		<div class="inner">
			<p class="tx-c margt10 margb20"><a href="<?php the_sub_field('recipe_page_link'); ?>"><img src="http://ozganics.swwireframes.com/wp-content/uploads/2013/11/browse-recipes-recipespageadj.jpg" alt="Visit recipes" width="147" height="15" class="center margt30" /></a>

		</div>
	</div>
	<?php endwhile; ?>
	
	<?php endif;
endwhile;
?><div style="clear:both"></div><?php
}
genesis();

Does anyone have an idea why this is happening?

Thanks

• Jonathan

• November 25, 2013 at 7:58 pm

It’s a purely CSS-issue.

Your current css on the recipy-boxes are:

width: 33.33%;
float: left !important;
margin-bottom: 30px;

With this CSS, if the boxes are not of equal height they will not appear on a clean row unless you put in like a clear:both after every three boxes before each new row (which does not work well when you want to change row-count for smaller devices). So instead try changing the css to this:

float:none !important;
margin-bottom:30px;
width:33%;
display:inline-block;
vertical-align:top;

• johnhillcoat

• November 25, 2013 at 8:29 pm

Thank you Jonathan. That solved my issue and I have learnt some more css. Thanks again.