I am working on the default blog home page code. I have 4 posts in each blog page. Now they are showing vertically (one after another, up and down). I want to show these 4 posts into 2 rows and each row will contain 2 posts each. Here is the code of the blog page. I have used normal CSS to make them 2 columns.
<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>
Alright. Try this and lmk how it goes.
<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>
Also, you should go into your index file and replace line 53 with .blgimg img{width: 100%;} instead of .blgimg img{width: 250px;height:250px;}