[Resolved] Loop post type in grid

[Guillem]

Hello,

I have a problem with the alignment of a loop of a custom post type created. I think it’s a topic that I could solve with css but I do not give with the solution. On the web you can see the problem quickly: https://democelta1.demoswp.com/testimonials/

The code that I have put is the following:

<?php
/**
 * The template for displaying testimonials Category pages.
 *
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package GeneratePress
 */
 
// No direct access, please
if ( ! defined( 'ABSPATH' ) ) exit;

get_header(); ?>

<?php
global $post;

$args = array(

    'posts_per_page' => '',
    'offset' => 0,
    'category' => '',
    'category_name' => '',
    'orderby' => 'date',
    'order' => 'desc',
    'include' => '',
    'exclude' => '',
    'meta_key' => '',
    'meta_value' => '',
    'post_type' => 'testimonis',
    'post_mime_type' => '',
    'post_parent' => '',
    'author' => '',
    'author_name' => '',
    'post_status' => 'publish',
    'suppress_filters' => true );

$myposts = get_posts( $args );

foreach ( $myposts as $post ) : setup_postdata( $post ); ?>

    <div class="testimonis-bloc">
        <div class="testimonis-contingut">
            <div class="pimage">
                <a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?></a>
            </div>
            <p class="testmonial-p"><?php the_content(); ?></p>
            <p class="testimonials-h2"><?php echo get_the_title(); ?></p>
            <p class="testimonial-country"><?php the_field('country'); ?></p>
            <div class="testimonials-socials">

            <?php $link = get_field('facebook'); if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-facebook-f"></i></span></a>

            <?php endif; ?><?php $link = get_field('Twitter'); if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-twitter"></i></span></span></a>

            <?php endif; ?><?php $link = get_field('Instagram');if( $link ): ?><a href="<?php echo $link; ?>"><i class="fab fa-instagram"></i></span></a><?php endif; ?>
        </div>
        </div>
    </div>

<?php endforeach; wp_reset_postdata();

get_footer();

And the basic CSS is:

/*------archive testimonials---------*/

.testimonis-bloc{
	width: 50%;
	float: left;
}

.testimonis-contingut{
	padding: 40px;
	margin: 30px;
	float: left;
	background-color: #ffffff;
	filter: drop-shadow(5px 5px 10px #ddd);	

}

.pimage{
	pointer-events: none;
	cursor: default;
}

.testimonials-h2 {
	float: left;
	font-size: 16px;
	font-style: italic;
	margin-right: 10px;
}

.testimonial-country {
	float: left;
	font-size: 16px;
	font-style: italic;
	font-weight: 600;
}

.testimonials-socials{
	float: right;
	font-size: 16px;
}

In the WordPress forum I am told that it may be a problem of the subject and the masonry option. How can I solve that.
Thank you
Guillem
Excuse my English, I’m Catalan

[Tom]

Hi there,

It does look like you’ll need to use a masonry-like solution.

This article looks like it explains implementing masonry quite well: https://www.wpdevsolutions.com/implement-masonry-in-wordpress/

Hope it helps 🙂

[Guillem]

Thanks Tom. With the tutorial I could solve the topic.

[Tom]

You’re welcome 🙂

[Author]

Posts