Theme Dispatch - WP Show Posts Layout

Hi Simon,

Can you link us to the page you're working on? To check the site's current CSS is?

You can use the private information text field to provide the details.

Hi, i just added the information private information.

thank you

Hi there,

#1 Add this CSS:

.wpsp-grid .wp-show-posts {
    grid-gap: 20px;
}

Then find this CSS in Customizer > Additional CSS:

.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

And increase the Height value to include the gap you added eg. 520px

#2 In Customizer > Additional CSS look for this rule:

.wpsp-grid .wp-show-posts article:nth-child(3) {
    grid-column: 5 / 7;
    grid-row: 2 / 4;
}

And change it to:

.wpsp-grid .wp-show-posts article:nth-child(3) {
    grid-column: 5 / end;
    grid-row: 2 / 4;
}

#3 Add this CSS:

.wpsp-grid .wp-show-posts-entry-meta-below-title {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.wpsp-grid .wp-show-posts-entry-meta-below-title span {
    margin-right: 5px;
}

#4 In Customizer > Additional CSS - remove this Rule:

.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more {
    display: none;
}

Thank you (bow)

You're welcome!