How to split wordpress index posts in 2 columns-CodePudding

first of all let me say I checked already all previous similar questions like this, but couldn't obtain any good results to make it work as planned.

I have also followed a few guides on external websites, but still not working.

Given I'm using this temporary free domain to make a test: https://maiale-1025cb.ingress-erytho.easywp.com/ I'm trying to split the homepage so it shows posts in 2 columns. As said, still without result.

Following an online guide, I tried by putting on CSS file the following code:

.half {
    width: 50%;
    float: left;
}
.ng-row {
    clear: both;
}

And on main index.php file this one:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">

[..]

</div>
<?php endwhile; ?>

The problem is nothing has changed. Can you please tell me where I'm going wrong and what eventually to edit? Thanks

Here's the full code of my index file:

<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="half">
<div class="container">
<article class="post col-md-6">
<h3 class="entry-title widget-title text-center"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<br>
<div class="col-md-4 text-center">
<a href="<?php the_permalink() ?>"><img style="border-radius: 10px;" src="https://pngimg.com/uploads/washing_machine/washing_machine_PNG15618.png" width="500" height="750" class="img-responsive inblock main-poster"></a>
</div>              
<div class="col-md-8 text-justify">
<table class="table table-condensed table-bordered table-hover">
<tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
<tr><th><i class="icon fa fa-cog"></i> Info</th><td>Bla bla bla bla bla bla bla bla bla bla bla</td></tr>
</table>
</div>  
</article>  
</div>
</div>
<?php endwhile; ?>
<?php get_footer(); ?>  
<?php else : ?>
<?php get_footer(); ?>  
<?php endif; ?>

CodePudding user response：

You have to print the posts only in the while loop and keep the <div > outside to make Bootstrap grid only inside the while function.

Also, you can use the half class css in this case, for example:

<?php get_header(); ?>

<div class="container">
<div class="row">

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="half">
<a href="<?php the_permalink() ?>">
<!-- Your post info -->
</div>

<?php endwhile; ?>

</div>
</div>

<?php get_footer(); ?>