Space between posts when using Looper

[AshleyF]

Hi,

I created a looper element to bring in three posts. One larger one on the left, and two stacked ones on the right. Works fine, apart from the fact I can’t seem to add the space between posts on the right.

I have the column set to be 100% and then the DIV element with the looper post, set to be 50% of the column. I tried flexbox set to space between which doesnt change anything, so I assumed because I had given the two posts 50% each, the full 100% height. Changing to 49% leaves space at the bottom, not in-between.

If I set height to auto it displays like this

Any thoughts what I am doing wrong?

[ruenel]

Hello Ashely,

Thank you for the very detailed post information. In your Looper Consumer Div element, add a bottom margin of at least 1em.

Kindly let us know how it goes.

[AshleyF]

Thank you, that did work in that placed a gap, but pushed the second block slightly below the left larger column.

I did a workaround, which will work (unless you think there is a better way to do this).

I made the two right hand posts 49.5% instead of 50% height of the column, this left a tiny maybe 1 or 2 pixel height width of the second post still overflowing. I then made the right hand column overflow ‘hidden’ which meant just a tiny fraction of that right hand second post is lost, but that’s a compromise I can live with.

[tristup]

Hi Ashley,

Glad that it works for you and resolved the issue. Still, setting the height value to 50% will do the same as you have mentioned the bottom margin of 0.35em.

Thanks

[AshleyF]

Thank you. In the end I worked out I can use math a bit wiser to achieve equal heights.

I simply set the height for the smaller posts at 32vh and added a 1vh margin (32 + 32 + 1 = 65vh) and then set the left hand height to a maximum of 65vh.

Anyway, all sorted now, thank you.

[prakash_s]

Hello Ashley,

Glad to know that things are well for you. Please feel free to reach us if you have any query regarding our theme and theme settings.

Have a great day!
Thanks