[Resolved] Building a grid from a View

[Author]

Posts

[philippeS-4]

I am trying to build a grid view of delegates about using bootsrap 4 columns. At the moment in Settings-Boot Strap Loading is set to "The theme or another plugin is already loading Bootstrap 3.0" when I try to view my page I don't get the grid layout. If I set to "Toolset should load Bootstrap 3.0" my menu bar goes wild as per picture. I tried using the Table base grid in the Loop Setting although it works, this is not Responsive and not happy with it.

What is the best way to deal with this? At the moment I am not even trying to use the divi builder to define the view layout.
How do I build a grid in Divi based from a view? That is responsive.
Link to a page where the issue can be seen:
hidden link

Thanks for your help.

[Shane]

Hi Philippe,

Thank you for contacting our support forum.

I believe divi is a special case and in order for you to render in 4 columns you will need to build this out manually.

Would you mind allowing me to have admin access to the page so that I can set this up for you and then let you know the code i've added ?

Thanks,
Shane

[Shane]

Hi Philippe,

So I managed to work on this for you and this is the solution.

<!-- wpv-loop-start -->
<div class='et_pb_row et_pb_row_0 et_pb_row_4col'>
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
			<div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="loop-item-in-all-delegates"]
                </div>
              </div>
      </div>
		[wpv-item index=other]
			<div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="loop-item-in-all-delegates"]
                </div>
              </div>
      </div>
		[wpv-item index=4]
			<div class="et_pb_column et_pb_column_1_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough">
              <div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left">
                <div class="et_pb_text_inner">
                [wpv-post-body view_template="loop-item-in-all-delegates"]
                </div>
              </div>
      </div>
		[wpv-item index=pad]
			<div class="et_pb_column et_pb_column_1_4 et_pb_column_3    et_pb_css_mix_blend_mode_passthrough"></div>
		[wpv-item index=pad-last]
			<div class="et_pb_column et_pb_column_1_4 et_pb_column_4    et_pb_css_mix_blend_mode_passthrough"></div>
		
	</wpv-loop>
</div>
	<!-- wpv-loop-end -->

Now this only renders 3 columns because of the content are width is only wide enough to accommodate 3 columns.

If the width were to increase then you will notice that the columns will become 4 column layout.

Thanks,
Shane

[philippeS-4]

Hi Shane,

Thank you very much for that and your quick reaction - I am not sure I understand the following

"Now this only renders 3 columns because of the content are width is only wide enough to accommodate 3 columns.

If the width were to increase then you will notice that the columns will become 4 column layout."

Are you saying that toolset content width limit to only 3 columns? How do I increase the width? I tried to remove the picture to see if it would go to 4 columns but it doesn't.

Also it isn't center with the 3 columns, see the attached with Chrome Dev Tool, really looks like we should have space for the 4th column.

Thanks for you continuous support,

[philippeS-4]

Maybe you meant the content width in the Divi builder which was set 1080 originally, I increased it to the max 1920 and still the same

[Shane]

Hi Philippe,

So divi sets a column width of each item at 20% with 4 columns.

So i reduced this to 18% so your items should now be displaying in 4 columns.

Thanks,
Shane

[philippeS-4]

Hi Shane,

Thanks for the info, with the 18% column the page is not really responsive anymore. Looks really weird. I have been playing with the settings in Chrome Dev Tools and I think the right setting so that it is responsive and the table is more or less centered with the rest of the page is:

Keep width to the default 20.875%
Remove the current right margin of 5.5%
Add a left margin of 3%
See attached screen shot

I have been trying to do implement this but could not make it work properly. The best I manage is to load it after the default which first shows 3 columns and then switch to 4.

Anyway I prefer to leave it in you expert hands, thanks again for your time this is a great learning experience for me!

[Shane]

Hi Philippe,

So digging deep into this issue, It seems if I set it to 5 columns it generates 4.

I suspect that this has to do with the compatibility with view and the divi builder.

However it should work fine now.

Thanks,
Shane

[philippeS-4]

Shane,

Thanks , sorry for being a pain in the but!
The grid is good, but my issue and what I have been trying do is to set the all grid (the 4 or 5 columns) is in the center off the page, so that they are centered with the above menu. At the moment the grid is aligned to the left of the page.
Sorry I probably wasn't clear enough in my previous message.
I don't have a problem if it is 4 or 5 columns.

Thanks again

[Shane]

Hi Philippe,

Possibly what we will need to do is to adjust the margins of the items to fill out the space.

Add this css to your view.

.et_pb_column_1_5{
    margin-left: 3.5%;
}

Thanks,
Shane

[philippeS-4]

My issue is resolved now. Thank you!