Advertisements

Disclosure: This post contains affiliate links. If you click through and make a purchase, I’ll earn a commission, at no additional cost to you. Read my full disclosure here.

How to reduce the margin of WP Show Posts in a sidebar

As I was redesigning my sidebar using the GeneratePress block elements I decided that I wanted it to include a list of posts. I created that list of posts using WP Show Posts (what else?) and placed in my sidebar using a shortcode block. Unfortunately, the way it ended up looking wasn’t as I had pictured. As it turns out, WP Show Posts adds quite a large margin to each article’s title when using only a single column.

As I’ve been using WordPress for quite some time now I knew there had to be a way of solving this problem. And not long after the problem had presented itself, it was already corrected with just a few lines of CSS.

Reducing the space between WP Show Posts titles

I first thought that the column gutter option in the WP Show Posts settings would solve this issue. As it turns out it doesn’t. But after analysing the titles I knew which CSS options needed to be adjusted. To solve the issue of having your WP Show Posts placed too far apart simply add the following CSS using the WordPress Customiser:

.wp-show-posts:not(.wp-show-posts-columns) .wp-show-posts-single:not(:last-child) {
    margin-bottom: 10px;
}

There is no need to adjust the block or the WP Show Posts list. Interesting the CSS is all you have to do.

About Liam Alexander Colman

Liam Alexander Colman has been working with GeneratePress for over two years and has built countless WordPress websites using it. In his personal setting, Liam maintains six websites. While not a developer, he has created innumerable GeneratePress Elements and is well versed in customizing the theme to his liking. Visit this link for more information and a showcase of his work.

Leave a comment

Advertisements