Repeater Field – Grids

• brandon.baily

• March 27, 2019 at 11:00 pm

Hi All,

I am trying to create a events grid using repeater fields that contain mostly text boxes and am having issues with the content showing up columns rather than rows. Below is an example of what I want to achieve and the php/css code.

Thanks

<?php
// check if the repeater field has rows of data
if( have_rows(‘new_event’) ):

// loop through the rows of data
while ( have_rows(‘new_event’) ) : the_row();
?>

<div style=”background-color:<?php the_sub_field(‘box_background_color’); ?>” class=”careers-events-box”>

<h2 class=”events-title”><?php the_sub_field(‘events_title’); ?></h2>

<p>Date:</p><p><?php the_sub_field(‘events_date’); ?></p>
<p class=”events-title-text”>Time: </p> <p><?php the_sub_field(‘events_time’); ?></p>
<p class=”events-title-text”>Location: </p> <p><?php the_sub_field(‘events_location’) ?></p>
<p class=”events-title-text”>Details: </p> <p><?php the_sub_field(‘events_details’) ?> </p>

</div>

.careers-events-box {
width: 300px;
height:300px;
border-bottom-color:red;
border-bottom-style: solid;
display: flex;

}

.careers-events-box h2 {
color:white;
text-align: left;
padding-left:5px;
margin:0px;
}

.careers-events-box p {
color:white;
text-align: left;
padding-left:5px;
}

.

• brandon.baily

• March 28, 2019 at 12:18 am

I have sorted this… just removed “display: flex;”