Create Testimonials using ACF Repeater

page-testimonials.php

<?php

/* Template Name: Testimonials */

add_filter( 'body_class', 'io_body_class' );
/**
 * Adds a css class to the body element
 *
 * @param  array $classes the current body classes
 * @return array $classes modified classes
 */
function io_body_class( $classes ) {
	$classes[] = 'testimonials';
	return $classes;
}

// Force full width content
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// remove the loop
remove_action( 'genesis_loop', 'genesis_do_loop' );

add_action( 'genesis_after_header', 'io_testimonials_title' );
/*
 * Adds Title to the page
 */
function io_testimonials_title() {
	 echo '<h1 class="entry-title">';
	 	echo the_title();
	 echo '</h1>';
}

add_action( 'genesis_after_header', 'io_testimonials' );
/*
 * Generates the HTML for testimonials from ACF
 */
function io_testimonials() {

	// check if the repeater field has rows of data
	if( have_rows('testimonials') ):

		echo '<div class="testimonials-container">';

	 	// loop through the rows of data
	    while ( have_rows('testimonials') ) : the_row();

			$testimonial = get_sub_field( 'testimonial' );
			$testimonial_url = get_sub_field( 'testimonial_url' );
			$testimonial_author = get_sub_field( 'testimonial_author' );
			$testimonial_author_photo = get_sub_field( 'author_photo' );

			echo '<div class="testimonial">';
			echo '<div class="testimonial-item">';
				echo '<div class="testimonial-content">' . $testimonial . '</div>';
			echo '</div>';
			echo '<div class="testimonial-item">';
				echo '<div class="author-photo"><img src="';
					echo $testimonial_author_photo;
				echo '" /></div>';
				echo '<div class="testimonial-author">';
					echo $testimonial_author;
				echo '</div>';
				echo '<div class="testimonial-website"><a href="';
					echo $testimonial_url;
				echo '" target="_blank">Visit Website <i class="fa fa-external-link" aria-hidden="true"></i></a></div>';
			echo '</div>';
			echo '</div>';

	    endwhile;

	    echo '</div>';

	else :

	    // no rows found

	endif;

}

// Enqueue fontawesome
add_action( 'wp_enqueue_scripts', 'io_enqueue_fontawesome' );
function io_enqueue_fontawesome() {
	wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
}

genesis();

style.css

/* # Testimonials
---------------------------------------------------------------------------------------------------- */
.testimonials {
    background: #fff;
}

.testimonials .site-inner {
	padding: 0;
}

.testimonials h1.entry-title {
    margin: 70px 10% 0;
}

.testimonials-container {
    margin: 0 70px;
}

.testimonial {
    background: #f7f7f8;
    padding: 15px 15px 15px 60px;
    margin-left: calc( -50vw + 50% );
    margin-right: calc( -50vw + 50% );
    padding: 70px 20%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.testimonial-item:nth-of-type(1) {
	flex-basis: 75%;
	align-self: center;
}

.testimonial-item:nth-of-type(1)::before {
    content: "\201C";
    font-family: fontawesome;
    display: block;
    font-size: 100px;
    height: 0;
    left: -60px;
    position: relative;
    top: -45px;
    opacity: .5;
}

.testimonial-item:nth-of-type(2) {
	flex-basis: 20%;
	align-self: center;
}

.testimonial-content p {
    margin: 0;
    display: inline-block;
}

.testimonial-author {
    /* display: inline-block; */
    font-style: italic;
    text-align: center;
    font-weight: 600;
}

.testimonial:nth-of-type(odd) {
    background: #fff;
}

.testimonial:nth-of-type(odd) .testimonial-item:nth-of-type(1) {
    order: 2;
}

.testimonial-website {
	text-align: center;
	font-size: 16px;
	font-style: italic;
}

.testimonial-website a {
    text-decoration: none;
}

.author-photo {
    text-align: center;
}

.author-photo img {
	border-radius: 50%;
	width: 150px;
}

.testimonials .fa-external-link {
    font-size: 12px !important;
}


@media only screen and (max-width: 1400px) {
	.testimonial-item:nth-of-type(1) {
		flex-basis: 70%;
	}	
}

@media only screen and (max-width: 860px) {
	.testimonial-item:nth-of-type(1),
	.testimonial-item:nth-of-type(2) {
		flex-basis: 100%;
	}

	.testimonial-item:nth-of-type(2) {
		margin-top: 5%;
		order: 2;
	}

	.testimonial:nth-of-type(odd) .testimonial-item:nth-of-type(1) {
		order: 1;
	}
}

@media only screen and (max-width: 640px) {
	.testimonial {
		padding: 70px 30%;
	}
}