Before I decided to post, I read all I could on this site with people of the same issues. Nothing seemed to work... I will explain it the best I can, I am using ACF + Repeater add-on to make A Restaurant Menu. I have Bootstrap loaded to help with making things easier, I want to have 3 columns going across. This is the HTML and PHP side of things.. I am using Bridge Theme, so I had to change the Bootstrap container class to container-acf because it kept going to the Bridge style instead. My end Goal if for it Look Similar To This All help is appreciated Thanks
My guess is I will need a Foreach loop.
`<?php
/*
Template Name: Restaurant Menu Template
*/
get_header(); ?>
<div class="content-fill-in-menu">HERE</div>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php
// Start the loop.
while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content wpb_wrapper container-acf">
<?php if ( have_rows('menu_sections') ):
while ( have_rows('menu_sections') ): the_row(); ?>
<h2 class="section_desc"><?php the_sub_field('section_title'); ?></h2>
<?php if ( have_rows('section_items') ): ?>
<?php while ( have_rows('section_items') ): the_row(); ?>
<article class="lmenu">
<ul>
<li>
<div class="container-acf">
<div class="row">
<div class="col-md-3 item_info">
<img class="dish_pic" src="<?php the_sub_field('dish_pic'); ?>" alt="<?php the_sub_field('dish_name'); ?>">
<h3 class="item_name"><?php the_sub_field('dish_name'); ?></h3>
<p class="item_desc"><?php the_sub_field('dish_description'); ?></p>
<h4 class="price">$<?php the_sub_field('dish_price'); ?></h4>
<span class="separator"></span>
</div>
</div>
</div>
</li>
</ul>
</article>
<?php endwhile; ?>
</table>
<?php endif; ?>
<?php endwhile;
endif; ?>
</div><!-- .entry-content -->
</article><!-- #post-## -->
<?php endwhile; // End the loop. ?>
</main><!-- .site-main -->
</div><!-- .content-area -->
<div class="content-fill-in-menu">HERE</div>
<?php get_footer(); ?>`
I think a lot of your problems are in the loop into "section_items" repeater field. In the "while" loop, you open and close a container and a row for each item, so you don't have your render in columns.
Here in a idea of changes, you need open a row before the start of the loop. I put a counter ($i) to restart a row each 4 items to prevent problems :
<?php if ( have_rows('menu_sections') ): ?>
<?php while ( have_rows('menu_sections') ): the_row(); ?>
<h2 class="section_desc"><?php the_sub_field('section_title'); ?></h2>
<?php if ( have_rows('section_items') ): ?>
<?php $i = 1; ?>
<div class="row">
<?php while ( have_rows('section_items') ): the_row(); ?>
<div class="col-md-3 item_info">
<article class="lmenu">
<img class="dish_pic" src="<?php the_sub_field('dish_pic'); ?>" alt="<?php the_sub_field('dish_name'); ?>">
<h3 class="item_name"><?php the_sub_field('dish_name'); ?></h3>
<p class="item_desc"><?php the_sub_field('dish_description'); ?></p>
<h4 class="price">$<?php the_sub_field('dish_price'); ?></h4>
<span class="separator"></span>
</article>
</div><!-- /.col -->
<?php
if( $i == 4 ){
echo '</div><div class="row">';
$i = 0;
}
$i++;
?>
<?php endwhile; ?>
</div><!-- /.row -->
<?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>