Je veux afficher mes messages wordpress en 2 lignes et chaque ligne contiendra 2 messages chacun

Je travaille sur le code de la page d’accueil du blog par défaut. J’ai 4 messages dans chaque page de blog. Maintenant, ils s’affichent verticalement (l’un après l’autre, de haut en bas). Je veux montrer ces 4 messages en 2 lignes et chaque ligne contiendra 2 messages chacun. Voici le code de la page du blog. J’ai utilisé le CSS normal pour en faire 2 colonnes.

<div class="amplify-content w-100 align-items-stretch order-0">
        <div class="content-list">
            <div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
            <div class="columncontent">
            <div class="row gutter-30 mb-4">
                <div class="col-12 col-md-6">

                    <main role="main">
                        <!-- section -->
                        <section class="bl">
                            <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                            <!-- article -->
                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <!-- post thumbnail -->
                                <span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                                </a>
                                <?php endif; ?></span>
                                <!-- /post thumbnail -->
                                <!-- post details -->
                                <br/>
                                <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>

                                <!-- /post details -->
                                <!-- post title -->
                                <h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
                                    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                                </h2>
                                <!-- /post title -->
                                <!-- button -->
                                    <a href="<?php the_permalink(); ?>" class="btn btn-outline-red rounded-0"><b>READ MORE</b></a><br/>
                                <!-- /button -->    
                                <!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
                                <br/>          
                                <?php comments_template(); ?> 
                            </article>
                            <!-- /article -->
                            <?php endwhile; ?>
                            <?php get_the_posts_pagination(); ?> 
                            <?php else: ?>
                            <!-- article -->
                            <article>
                                <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                            </article>
                            <!-- /article -->
                            <?php endif; ?>
                        </section>
                        <!-- /section -->
                    </main>
                </div>
                <div class="col-12 col-md-6">
                </div>
            </div>
            </div>
        </div>
    </div>

Solution n°1 trouvée

Très bien. Essayez ceci et lmk comment ça se passe.

<div class="amplify-content w-100 align-items-stretch order-0">
    <div class="content-list">
        <div class="mb-4"><strong class="text-uppercase">Category</strong> Graphic Design Lab</div>
        <div>
        <div>
            <div class="col-12">

                <main role="main">
                    <!-- section -->
                    <section class="bl row">
                        <?php if (have_posts()): while (have_posts()) : the_post(); ?>
                        <!-- article -->
                        <article id="post-<?php the_ID(); ?>" class="col-xs-12 col-sm-6">
                            <!-- post thumbnail -->
                            <span class="blgimg"><?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                            <?php the_post_thumbnail(); // Fullsize image for the single post ?>
                            </a>
                            <?php endif; ?></span>
                            <!-- /post thumbnail -->
                            <!-- post details -->
                            <br/>
                            <span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>

                            <!-- /post details -->
                            <!-- post title -->
                            <h2 style="font-family: Journal-Regular;color: #d20a1e !important;text-transform: uppercase!important;" class="blgg">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                            </h2>
                            <!-- /post title -->
                            <!-- button -->
                                <a href="<?php the_permalink(); ?>" class="btn btn-outline-red rounded-0"><b>READ MORE</b></a><br/>
                            <!-- /button -->    
                            <!-- <span class="write" style="width:80% !important;"><?php the_excerpt(); // Dynamic Content ?></span> -->
                            <br/>          
                            <?php comments_template(); ?> 
                        </article>
                        <!-- /article -->
                        <?php endwhile; ?>
                        <?php get_the_posts_pagination(); ?> 
                        <?php else: ?>
                        <!-- article -->
                        <article>
                            <h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
                        </article>
                        <!-- /article -->
                        <?php endif; ?>
                    </section>
                    <!-- /section -->
                </main>
            </div>
            <div class="col-12 col-md-6">
            </div>
        </div>
        </div>
    </div>
</div>

De plus, vous devriez aller dans votre fichier d’index et remplacer la ligne 53 par .blgimg img{width: 100%;}au lieu de.blgimg img{width: 250px;height:250px;}