[Resolved] Loop result display alignment issue.

[Author]

Posts

[Gregory Crafts]

I am trying to: Display headshots for each of my company members

Link to a page where the issue can be seen: hidden link

I expected to see: 1x3 rows results aligned perfectly

Instead, I got: Strange gaps in rows and no clue how to fix them.

I'd upload a screenshot, but you can just go to the page and see what I mean.

[Luo Yang]

Hello,

I have checked the URL you mentioned above, it seems that you have you are using Bootstrap grid mod to setup the Views search result, and three columns in each row.

But your website does not load Bootstrap framework JS/CSS files, and it is using Divi child theme.

As I know, the Divi theme is not compatible with Bootstrap grids, see our document:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/

Divi is not compatible with the Bootstrap CSS framework, which Toolset uses by default.

I suggest you try one of below options:
1) Enable Bootstrap framework for your website, and switch to another theme
Dashboard-> Toolset-> Settings-> General
in section "Bootstrap loading", choose option "Toolset should load Bootstrap 3.0"

2) Or you can manually to setup the search result markup, by following our document:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/matching-divi-styling-using-toolset/#styling-custom-posts-and-post-archives

See similar thread:
https://toolset.com/forums/topic/building-a-grid-from-a-view/

[Gregory Crafts]

Hi Luo Yang!

Thank you so much for your help thus far! I've tried implementing what you've suggested, and while I'm close to my desired result, I am not quite there yet.

I have disabled Bootstrap in Toolset, and I have edited the Loop settings so it gives Unformatted results instead of relying on Boostrap to power a layout.

However, I'm still getting strange gaps in my loop results. Somehow, I'm getting results distributed across 4 columns even though I've got the loop styled to wrap at 3. Also, for some reason, the results are also appearing under my vertical menu.

hidden link

Any idea how to fix this?

[Luo Yang]

I think you are doing something wrong in the loop output, it should output three columns per row, for example:

<div class="et_pb_row">
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
</div>
<div class="et_pb_row">
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
    <div class ="et_pb_column et_pb_column_1_3"> ...  </div>
</div>
...

I have tested the URL you mentioned above, but it seems you are outputting all columns in one single row, see screenshot, row.JPG

Since Divi theme is using their own custom CSS class, you will need to manually setup the HTML codes, see the solution I mentioned above:
https://toolset.com/forums/topic/building-a-grid-from-a-view/

[Gregory Crafts]

Yeah, that's the thing; I grabbed the code from the "building a grid from a view" post and thought I modified it correctly to output three columns per row. I'm guessing the problem is with the view output. I'll re-read everything and try again.

[Luo Yang]

There is a document about "Bootstrap grid"
https://toolset.com/documentation/user-guides/view-layouts-101/#bootstrap

I suggest you setup it as Bootstrap grid, then replace the CSS class name with Divi built-in CSS class names in HTML codes.

Please let me know if you need assistance for it. thanks

[Gregory Crafts]

That worked! Thank you so much!

[Luo Yang]

You are welcome