Hi @extinctdisney
Related Posts Thumbnail plugin has a block section as well.
On your site, the title is defined in the H4 tag moreover, If you want to add custom classes you can add custom classes as well to target the specific element from the Related Posts Thumbnail block.
Screen Shot
Apologies, let me clarify.
I have set the Related Post plugin settings to have the title set to H4 and it is working as it should on all the automatically placed instances of the Plugin (as can be seen on this post: https://www.extinctdisney.com/food-rocks/).
It is not, however, working where I have used the gutenberg block on the landing page (as can be seen here: https://www.extinctdisney.com/). When the block is added, the only options are to change what the title above the related posts says and, despite it being set to H4 in the settings, where I have manually placed the block, you can see where it says “Jump In!” is not an H4 sized heading.
When using the Gutenburg block, write the title with the tag.
For example, if you have the title “Some Title” write it as “<h4> Some Title </h4>”.
It will be converted to a h4 tag.
Thank You
Thanks so very much. That fixed the heading size in the block but now, I have an increase in the amount of white space between the heading and the posts. Any thoughts on how to resolve that?
Hi @extinctdisney
You can target the specific block heading by custom CSS by giving a class to the h4 tag.
Thank You. 🙂
Sorry, I’m not sure that’s the answer I’m looking for. There is white space above and below the block heading. How would I remove that with css?
Hi @extinctdisney
I couldn’t see any extra spacing above and below the heading could you be more specific on which page you are facing this issue.
I checked your given page and it didn’t contain any extra spacing regarding Related Posts Thumbnails. (https://www.extinctdisney.com/food-rocks/)
Looking Forward Dear,
I am referring to the landing page I’ve been speaking about throughout this thread.
https://www.extinctdisney.com/
If you visit that, you’ll see space above and below the H4 heading of “Jump In” above the Related Posts block.
Oh, so this is the page, no problem…
Use the following CSS to remove them also purge the cache after adding this custom CSS.
p.relpoststh-block-title {
display: none;
}
.relpost-thumb-container p {
display: none;
}
Cheers!
In trying this, it appeared to only make the heading smaller. The white space was unchanged. To confirm, should this css go in the css for the block or the page overall?
Hi @extinctdisney
Here is your page before the CSS https://d.pr/i/0YR4D2
Here is your Page after the CSS https://d.pr/i/XDYIvi
You must be using some cache plugin so please purge the cache.
The CSS is designed only to target the Related Post block elements.
Regards,
Team Related Posts Thumbnails
The answer to my question is that this css needed to be placed in the overall custom css for the theme. I understand it was designed to target just that block but what I was asking was where should the css go. I had originally placed it in the “Additional CSS Class(es)” section of the Advanced editor for that block specifically. It needs to go into the full site custom css.
Thanks
Hi @extinctdisney
No, dear.
The Additional Class/(es) just adds the class name/s to that block.
The CSS should go in the theme’s CSS so it can target the block.
Thank You
