[Valerie MParticipant]

Hello,

I am working on the site http://www.yogasportsperformanceinstitute.com at the very bottom of the homepage. Right now the posts overflow and I don’t want them to overflow, but I also do not want to hide the overflow. I’d like to get the posts to fit within the same column size as the first column in the row. Both columns would ideally be the same size without any blank space. At the moment I have set the height of recent posts to 500px, but it hasn’t actually constrained the posts to fit or cover. It does do this when the posts are horizontal though, it will shrink the posts to fit the column.

So, my question is, is there a way to make sure the recent posts fit within a set row size? Or how can I change the individual post (image) sizes?

[RadModerator]

Hi there,

Thanks for writing in.

Would you mind providing a mockup design of how it should be? All I could see is doubled recent post item, the second one is the row height. Hence, if you wish to fit it to the row, you must limit the recent post item to just one.

You can’t have vertical recent posts (two posts) but fit it to horizontal recent posts (single post).

Thanks!

[Valerie MParticipant]

It would ideally look like this (attached).

Is there any way to make two columns, one with one row and the other with two rows and make both columns the same size like what is in the screenshot? Maybe a table with recent posts inside? It has to be possible somehow! (LOL)

Thanks in advance.

[Valerie MParticipant]

Image here: http://yogasportsperformanceinstitute.com/wp-content/uploads/2017/03/Screenshot_464.png

[FriechModerator]

Hi There,

That is quite possible with recent post, but you need to write the right-side as shortcode.

First setup a ROW that is No Column Container and Marginless (http://prnt.sc/epedis), this is to make the ROW full width and no space between the 1/2 columns.

Then on left column place a Recent Post Element (post count 1), then on the right column place a RAW Content element and assign a class custom-rp on it. Then paste the code below on it

<div class="x-container marginless-columns">
	[x_recent_posts type="post" count="1" offset="1" category="" orientation="vertical" no_sticky="true" no_image="false" fade="false"]
</div>
<div class="x-container marginless-columns">
	[x_recent_posts type="post" count="1" offset="2" category="" orientation="vertical" no_sticky="true" no_image="false" fade="false"]
</div>

That is a shortcode to output the 2nd and 3rd recent post.

Then add this on your custom CSS.

.custom-rp .x-recent-posts {margin-bottom: 0;}
.custom-rp .x-recent-posts .x-recent-posts-img {
	    padding-bottom: 23.5%;
	    background-size: 100% 100%;	
}

Be warned that the feature image on the recent post is set as background, if the image does not have the right size-ratio it’ll look squeeze.

Hope it helps, Cheers!

[Author]

Posts