[Resolved] Match WP Show post padding with the one on the site (blog archive)

[Oliver]

My front page is a series of WP Show post lists. I would like the padding of said WP show Post lists be the same as the one in the blog archive so it looks the same.

I don´t have a specific blog page but when a category or author or tag is clicked, you can see that the blog archive has a narrower padding than the posts generated by the WP Show posts in the front page.

[Oliver]

Interestingly i also have recommended posts after each posts also created using WP Show post, and the padding there seems to match the padding of the blog archive as can be seen here:

[David]

Hi there,

is it the spacing between the Image, Title and Excerpt ?

[Oliver]

Hi David! exactly, in the front page the space to the side of each post (title, image & excerpt) is wider than in the blog roll, as seen when you click on a posts category, an author or a tag.

[Ying]

Hi Oliver,

Try this CSS:

.home .inside-article h4.wp-show-posts-entry-title {
    font-size: 20px;
    line-height: 1.2em;
}
.home .inside-article .wp-show-posts-entry-content,.home  .inside-article  .wp-show-posts-entry-summary, .home .inside-article .wp-show-posts-image.wpsp-image-center, .home .inside-article .wp-show-posts-entry-header {
    margin-bottom: 2em;
}
.home .inside-article .wp-show-posts-inner {
    padding-bottom: 30px;
}

And go to the WP show post list, set the Columns gutter to 30pxinstead of 3em.

Let me know 🙂

[Oliver]

Ying thanks a lot, it worked. The only thing still off is the blank space after the wp show posts lists. For some reason there is more white space under some wp show posts lists than under others. It was already like that before adding your CSS and with the `.home .inside-article .wp-show-posts-inner {
padding-bottom: 30px;
}`, the blank space difference between wp show posts lists is even bigger.

I tried adding !important; but nothing. Would logging in make it easier for you to find out what might be wrong?

[Oliver]

Could it have something to do with the space over the separators?

[Ying]

Yes, that’s the margin of the separator.

Try this CSS to remove the top margin of the separator:

.home hr.wp-block-separator.has-text-color.has-background.is-style-wide {
    margin-top: 0;
}

Let me know 🙂

[Oliver]

It worked but yet again two wp show posts lists have a narrower space to the separators than the other two.
Using the inspector i can see that two separators have different margin values. can i style just one separator using some kind of ID or something? if not, I´ll just keep playing with the code you provided me with and find a middle ground

[Ying]

WP separator block doesn’t come with an ID.

Can you tell me which separators you want to target?

I can give it a try 🙂

[Oliver]

now I´m not quite sure because after adding the margin top = o i realized that they kind of all look off. I would say that I would like the last three separators (from 4 in total), have the same padding/margin on top and bottom as the first one, right after the first WP Show Posts list that is showing only one post called Tempor invidunt ut labore

[Ying]

Give this a try:

.home .gb-grid-wrapper-add95afa + .wp-block-separator, .home .gb-grid-wrapper-247fcc16 +.wp-block-separator, .home .gb-grid-wrapper-28ab0abf + .wp-block-separator {
    margin-top: 0;
    margin-bottom:40px;
}

Remove this CSS:

.home hr.wp-block-separator.has-text-color.has-background.is-style-wide {
    margin-top: 0;
}

[Oliver]

Ying it looks a lot better than at the beginning but still the white space before and after all separators is not the same throughout. Specially the third separator has more white space on top than the other three .

[Ying]

You have several empty paragraph blocks disturbing the space which needs to be removed：
1.https://www.screencast.com/t/RJxFpy3Oy
2.https://www.screencast.com/t/JnRp8KWoy

Once the paragraph blocks are removed, replace this CSS:

.home .gb-grid-wrapper-add95afa + .wp-block-separator, .home .gb-grid-wrapper-247fcc16 +.wp-block-separator, .home .gb-grid-wrapper-28ab0abf + .wp-block-separator {
    margin-top: 0;
    margin-bottom:40px;
}

with this:

.home .gb-grid-wrapper-add95afa + .wp-block-separator, .home .gb-grid-wrapper-247fcc16 +.wp-block-separator, .home .gb-grid-wrapper-28ab0abf + .wp-block-separator {
    margin-top: 0;
    margin-bottom:60px;
}
.home section#wpsp-136 + .wp-block-separator,  .home .gb-grid-wrapper-add95afa + .wp-block-separator {
    margin-top: 30px;
    margin-bottom: 60px;
}

[Oliver]

I can´t explain why there were two p blocks since I couldn´t even see them in gutenberg. Since the front page is made out of 10 blocks, I ended up creating the front page again.

At the end, it still doesn´t work, this time the first and last separator have the same white space amount at the top, while the second and third, both share same amount also.

I´m going to leave it as it is because we managed to make the wp show posts look like the posts in the blog roll which was the main issue.

I really appreciate your help! Have a nice day!

[Author]

Posts