Space Between Posts in Posts Block

Hi @yoyokhan,

Thank you for using Otter plugin!

You can try this CSS for making the gap smaller between the posts (default is 30px):

.wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-blog {
    margin-bottom: 0px;
}

This will also make the button appear closer to the last row.

I hope it helps!

Hi, Thanks for response. I added this to Posts Block custom CSS field but nothing happened. Right now, it is added in Showbiz Block.

@yoyokhan

You should add it to the Posts block using CSS tab on the right sidebar.

Hi, Thanks a lot. It worked. Two things more,
How to customize posts title. Like Line height, mouse hover color
How to give space to Button and Heading from Left (both items are too left on mobile)

Thanks

Hi @yoyokhan!

The font size for posts title can be changed by expanding “Design & Layout” and then “Title” – screenshot. Other customizations can be done using custom CSS.

Regarding the space from the left side of the buttons from the page you provided, that can be changed on mobile devices by adding the code below in the Custom CSS tab of the button, in the right sidebar. Feel free to change the value of the margin as you wish until you achieve the desired style.

@media(max-width: 768px){
.page-id-86063 .wp-block-themeisle-blocks-button-group {
    margin-left: 20px !important;
}
}

As for the headings, the code below should be added in the Custom CSS tab of the heading, in the right sidebar.

@media(max-width: 768px){
.page-id-86063 h2 {
    margin-left: 20px !important;
}
}

Have a nice day!

Thanks a lot. It really helped. Grateful.

1. How to change Post Title Color of Post Block as “Design & Layout” has no option for it. I want to have red background color of Post block with white title font.

2. I have added link to Button (view all) but it is not working on Mobile. Either it does not open or opens after clicking 4,5 times the button. I am using wp rocket and its delayed Javascript feature is enabled, Can this be the cause? may be Javascript of otter have to be excluded ?

Thanks

Hi, i know you must be busy but If you response to the last Question, I will be highly grateful.

PS- I have bought pro version to get full advantage to Otter.

Hey @yoyokhan,

1. You can use the following CSS to do it:

.wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-body .o-posts-grid-post-title a {
  color: black;
}

2. It seems like you’ve added this CSS somewhere which is causing that:

.wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-blog {
  margin-bottom: -30px;
}

You can either remove this or add a Spacer above the Button block to bring a bit lower.

Let me know if that helps!

Hi, thanks. I have four posts blocks and when I use following code, its gets apply to all. But I want it to be used on single block.

.wp-block-themeisle-blocks-posts-grid .o-posts-grid-post-body .o-posts-grid-post-title a {
  color: black;
}

I have used this on both Reusable posts blocks and new as well, result is same.

thanks