How to display a summary next to an image in the post list

Hi there,

You’ll need GP Premium to style the Blog/Archive pages.

Otherwise, you’ll need custom CSS. Here’s an example:

@media (min-width: 769px){
    :is(.blog,.archive) .content-area .inside-article {
        display: flex;
        flex-wrap: wrap;
    }
    
    :is(.blog,.archive) .content-area .inside-article .post-image {
        flex-basis: 40%;
    }
    
    :is(.blog,.archive) .content-area .inside-article  .entry-summary {
        padding-left: 20px;
        flex-basis: 50%
    }
}

Thank you for answer.

I added the CSS code as you mentioned. However, it is displayed strangely on the screen as shown in the picture below. I think it is affected by the length of the post title.

Thank you.

Try to change the CSS to this:

@media (min-width: 769px){
    :is(.blog,.archive) .content-area .inside-article {
        display: flex;
        flex-wrap: wrap;
    }
    
    :is(.blog,.archive) .content-area .inside-article .post-image {
        flex-basis: 40%;
    }
    
    :is(.blog,.archive) .content-area .inside-article  .entry-summary {
        padding-left: 20px;
        flex-basis: 50%
    }
    :is(.blog,.archive) header.entry-header {
        width: 100%;
    }
}

Problem solved. Thank you for your kind help.

Have a nice day 🙂