Uniform recent posts element sizing

Support
#1

On integrity stack, dark theme - Pro, looking to get the recent posts elements to be all the same size. Looks nicer, no?

The image shows what it looks like now.

I manually create the excerpt which tends to size the box but it would be nice if they all shored up to the bottom together.

How to do this?

#2

Hello @thoughtsociety,

Thanks for asking. :slight_smile:

You can take a look at the solution mentioned in following thread:

Thanks.

#3

Unfortunately, that didn’t seem to work.
I cleared cache after adding the code in the js section.

#4

FYI : I am using post settings - excerpts to make the excerpt appear.

#5

Hi @thoughtsociety,

It sets height for every article element instead of the content height (excerpt). Would you mind removing the script again? I can’t test another script as the code is in effect.

Thanks!

#6

ok will do now.

Done

#7

Hello @ThoughtSociety,

Thanks for updating in! To resolve this, please make sure that you have removed the given JS code first. And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (min-width: 768px) {
 .x-iso-container .isotope-item .entry-wrap{
    min-height: 220px;
 }   
}

We would loved to know if this has work for you. Thank you.

#8

Yes it does now!

Thanks much.

#9

You are most welcome. :slight_smile:

#10

Sorry but it still seems to format incorrectly.
Here is what I am doing:

I am using the Yoast excerpt because that works with facebook and I have the blog/excerpt length in PRO/Blog/content field empty.

The length of the title as well as the length of the excerpt causes variations in the size of the container. The css code is there (and the JS is gone) so I have it set as you suggested.

It does this whether or not I have a sidebar and right now I am testing with the sidebar disabled.
I plan to reenable the sidebar once this is working.

#11

Hi,

Please note that this is how masonry layout works, each element does not have a fixed height.

Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

But if you really need it to have the same height, try to increase the min height in your css code.

eg.

@media (min-width: 768px) {
 .x-iso-container .isotope-item .entry-wrap{
    min-height: 520px;
 }   
}

Hope that helps.

#12

Yes, that does help. I settled on 320 height and it works with the two-column previews (I turned on the right sidebar)

#13

Glad to hear that. :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.