the_post layout

I'm getting stucked with the layout of the_post function.

I would love to have two post thumbnails per row and above the thumbnails the description, title, category of the post.

If I use flex property it shows to me all of those above in row.

any help?

Here is the code updated: HTML / PHP

?php
        // the query
        $the_query = new WP_Query(array(
            'category_name' = 'first_4',
            'post_status' = 'publish',
            'posts_per_page' = 4,
        ));
?

div class='article-container'
            ?php if ($the_query-have_posts()) : ?
                ?php while ($the_query-have_posts()) : $the_query-the_post(); ? 
    div class='article-row'
        div class='article-column'
                        ?php the_post_thumbnail(); ?  
        /div
                       div class='article-info'
                           span?php the_category(); ?/span 
                           span ?php the_title(); ?/span 
                           span ?php the_excerpt(); ?/span 
                           span ?php the_content(); ?/span 
                        /div 
    /div
                    ?php endwhile; ?
                    ?php wp_reset_postdata(); ?

                ?php else : ? 
                    p?php __('No News'); ?/p
                ?php endif; ?
/div

?php

and HERE the CSS

.article-container {
display: flex; 
flex-flow: row wrap;
justify-content: space-between;
margin: auto;
}

.article-container .article-row {
    box-sizing: border-box;
    width: 48%;
}

.article-row .article-column img{
    width: 100%; 
    height: auto;

It seems to work but any advice will be appreciated! Of course I'm just learning as a passion =)

Topic screen-layout css Wordpress

Category Web

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.