related articles styling and spacing

[davidll]

Hello

I can’t find how to style related articles in cardinal
At the moment, the are in masonry with no spacing/gutters.

Is there options for styling related articles (switching from masonry to standard / also spacing / not showing the featured image)?

Many thanks

David

[laranz – SUPPORT]

Hi,

Try adding this Custom CSS to add some space in between.

.related-items .recent-post { margin-right: 10px; }

Remove the thumbs using this Custom CSS.

.related-items .recent-post figure { display: none; }

Let us know,

Thanks,
laranz.

[davidll]

Thanks Laranz

I’ve also managed to address the padding using:
.posts-type-bold .recent-post .details-wrap

But the type is set as H2 – Any chance changing this so its smaller!
or even better have more columns?

Thanks again

David

[laranz – SUPPORT]

Hi David,

You can alter those font size using this Custom CSS.

.posts-type-bold .recent-post .details-wrap h3 { }
.posts-type-bold .recent-post .post-date { }
.posts-type-bold .recent-post .author { }

First is for the title, second is for the post date, and the last one is for the author.

or you mean the related articles title itself means, use this one.

.related-articles > h2 { }

Let us know,

Thanks,
laranz.

[laranz – SUPPORT]

Hi,

If you want to add more column means, you need a bit of editing there in the code. Open up \wp-content\themes\cardinal\swift-framework\content\sf-post-detail.php in line #474 you saw the code block for related posts, that starting /* POST RELATED ARTICES

Alter the code like this: http://take.ms/jyUtt

Do that in a child theme for update proof 🙂

Let us know,

Thanks,
laranz.

[davidll]

Hello Laranz

I dont understand…

At the moment – I can see the titles for related articles are in H2 (via view source)

I would like to make this smaller – as in NOT H2

adding
.posts-type-bold .recent-post .details-wrap h3 { }
doesn’t make sense?

Thanks

David

[davidll]

worked it out.

.posts-type-bold .recent-post .details-wrap > h2 {}

[laranz – SUPPORT]

Hi,

I think we two talk about two different titles I think, that makes this confusion, Glad you sort that out 🙂

Let us know,

Thanks,
laranz.

[mcheck]

Try adding this Custom CSS to add some space in between.

.related-items .recent-post { margin-right: 10px; }

When I add this, it pushes the blocks to the next line. How can I shrink the overall width to allow the 4 to continue to appear on the same row?

THanks! Mike

[David Martin – Support]

Hi Mike,

This is a very old thread, can you post your link URL and a description of what you are trying to do?

– David.

[mcheck]

Thanks David, will do. I’ll start a new one: here it is,

Recent Posts gutter in between posts

[Rui Guerreiro – SUPPORT]

Thanks we will check the other topic.
-Rui