wp_posts with given design not repeating properly - wordpress

Question

I used bootstrap 4 to design the blog page. Design is well but when I am using wp_posts design not working properly.
<?php
global $post;
$events = array(
'post_type' => 'post',
'post_status' => 'publish',
'category_name' => 'events',
'posts_per_page' => 4,
);
$arr_posts = new WP_Query( $events );
$myposts = get_posts( $events );
foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
<div class="row single-event">
<div class="col-6 p-0 m-0">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
</div>
<div class="col-6 event-desc">
<?php the_title() ?>
<p class="exerpt">
<?php if ( is_category() || is_archive() ) {
echo excerpt(30);
} else {
echo content(30);
}
?>
</p>
<p class="date">Event Date: <span><?php echo get_the_date('F j, Y'); ?></span></p>
Learn More..
</div>
</div>
<?php endforeach;
wp_reset_postdata();
?>
Here is my site https://rccsl.com/events/
Please help. Thanks in advance.

Answer 1

Please use below code
<?php
global $post;
$events = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 4,
);
$arr_posts = new WP_Query( $events );
$myposts = get_posts( $events );
foreach ( $myposts as $post ) { setup_postdata( $post )?>
<div class="row single-event">
<div class="col-6 p-0 m-0">
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
endif;
?>
</div>
<div class="col-6 event-desc">
<?php the_title() ?>
<p class="exerpt">
<?php if ( is_category() || is_archive() ) {
echo "test";
} else {
echo "test";
}
?>
</p>
<p class="date">Event Date: <span><?php echo get_the_date('F j, Y'); ?></span></p>
Learn More..
</div>
</div>
<?php } ?>

Answer 2

It seems that the html code is broken when it's output. If you inspect your website with the developers tools you will see that instead of having an output of:
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
</div>
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
</div>
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
</div>
You have as a result:
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
</div>
<div class="row single-event">
<div class="col-6 p-0 m-0"></div>
<div class="col-6 p-0 m-0"></div>
</div>
</div>
First of all add a semicolon (;) after the_title()
the_title();
Then try to replace
<p class="exerpt">
<?php if ( is_category() || is_archive() ) {
echo excerpt(30);
} else {
echo content(30);
}
?>
</p>
With:
<div class="exerpt">
<?php if ( is_category() || is_archive() ) {
echo excerpt(30);
} else {
echo content(30);
}
?>
</div>