[Resolved] Loop item layout leaving blank spaces between posts

[Author]

Posts

[catrionaD]

I am trying to: Display all posts so people can browse

Link to a page where the issue can be seen: mypickle.org/stories

I expected to see: 3 per row, and any "stragglers" on the bottom row.

Instead, I got: 3 in top row, one on second row, remainder rows full.

[Christian Cox]

Hi, this is a positioning quirk in the Bootstrap grid system that isn't simple to solve. One way is to give each item in the grid a fixed height, but that can lead to problems at different screen resolutions so you have to accommodate that with media queries in your CSS (different fixed heights depending on screen resolution). Another approach is to add a div with the class "clearfix" just after every third item in the results. This fixes the issue at large resolutions, but then at medium resolutions where you have two columns the issue is still apparent. You might be able to solve that by making each item full width at medium resolutions (one column instead of two), if your design is flexible.

https://getbootstrap.com/docs/3.3/css/#grid

[catrionaD]

Thanks Christian, which is the best resolution in your opinion?

[Christian Cox]

I think the clearfix solution will be the simplest to implement effectively without a lot of coding knowledge. If you share your Loop editor contents, I can help you implement this solution. Other solutions will require more programming knowledge and custom code.

[catrionaD]

That would be great thanks! The loop editor code is:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
[wpv-item index=3]
<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
[wpv-item index=other]
<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
[wpv-item index=pad]
<div class="col-sm-6 col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-6 col-md-4"></div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[Christian Cox]

Try this modified code. I added the clearfix to index=3:

[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="col-sm-12 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
[wpv-item index=3]
<div class="col-sm-12 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
<div class="clearfix"></div>
[wpv-item index=other]
<div class="col-sm-12 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
[wpv-item index=pad]
<div class="col-sm-12 col-md-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-12 col-md-4"></div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]No items found[/wpml-string]
[/wpv-no-items-found]
[wpv-layout-end]

[catrionaD]

Works for desktop but has created an issues with layout on tablet.
Tablet e.g. ipad would show two posts per row, now only shows one.
On mobile, one per row is fine.

[Christian Cox]

That's exactly what I said would happen. Review my comment above: https://toolset.com/forums/topic/loop-item-layout-leaving-blank-spaces-between-posts/#post-1241803
I don't have a fix that allows two columns at medium resolutions, sorry!

[catrionaD]

I figured out the layout conflict related to the size of contents not being consistent i.e. character count in the title and image size. When consistent, this is not an issue and I removed the clearfix code.