Hi there,
Bootstrap grid has never been something I've enjoyed trying to get my hear around.
For example an issue I just can't resolve.
We are, on a new layout using "col-md-4 col-sm-6"
On this test page: hidden link
On desktops this would be 3 columns, and on tablet we would like 2 columns, on phone 1 col.
The issue is it breaks the flow of the grid on iPad. Never come across this before as all our grids are 2 column so far.
Any thoughts on how I resolve this issue please?
Thank you.
Hi Pete,
Thank you for contacting us and I'd be happy to assist.
From your view's output, it seems that the loop is set to wrap after every 2 items to insert a new div container with class "row".
Since you need to control the breakpoint for items-per-row, based on the Bootstrap's grid classes, you'll need all the results items in the same div container with class "row".
Example "Loop Editor" content:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<div class="row">
<wpv-loop>
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-view-name"]</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
Note: You'll replace the "loop-item-in-view-name" with the actual template's slug.
Please also note how, I've used different grid classes ( "col-md-4 col-sm-6 col-xs-12" ) to show different items-per-row, on medium, small and extra small devices.
( ref: hidden link )
regards,
Waqar
Hi again Waqar,
Appreciate your time again 🙂
Ok, I don;t understand why the grid isn;t even for 3 col wide ( see pic)
The code I'm using is below and I've added col-md-4 col-sm-6 col-xs-12 as suggested.
Also the actual template's slug is being used.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=other]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=2]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-4"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Sorry no properties match your search.[/wpml-string]
[/wpv-no-items-found]
<div class="nav-links">[wpv-pager-nav-links output="bootstrap" previous_next_links="true" force_previous_next="true" reach="2"]</div>
[wpv-layout-end]
Hi again Waqar,
Appreciate your time again 🙂
Ok, I don;t understand why the grid isn;t even for 3 col wide ( see pic)
The code I'm using is below and I've added col-md-4 col-sm-6 col-xs-12 as suggested.
Also the actual template's slug is being used.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=other]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=2]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-4"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Sorry no properties match your search.[/wpml-string]
[/wpv-no-items-found]
<div class="nav-links">[wpv-pager-nav-links output="bootstrap" previous_next_links="true" force_previous_next="true" reach="2"]</div>
[wpv-layout-end]
Hi again Waqar,
Appreciate your time again 🙂
Ok, I don;t understand why the grid isn;t even for 3 col wide ( see pic)
The code I'm using is below and I've added col-md-4 col-sm-6 col-xs-12 as suggested.
Also the actual template's slug is being used.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=other]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
[wpv-item index=2]
<div class="col-md-4 col-sm-6 col-xs-12">[wpv-post-body view_template="loop-item-in-holiday-sub-pages-3-col"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-4"></div>
[wpv-item index=pad-last]
<div class="col-sm-4"></div>
</div>
</wpv-loop>
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
[wpml-string context="wpv-views"]Sorry no properties match your search.[/wpml-string]
[/wpv-no-items-found]
<div class="nav-links">[wpv-pager-nav-links output="bootstrap" previous_next_links="true" force_previous_next="true" reach="2"]</div>
[wpv-layout-end]
Hi Pete,
Thanks for writing back.
If you'll compare the code inbetween the "<!-- wpv-loop-start --> ... <!-- wpv-loop-end -->" tags from my example and your's view, you'll see that it is completely different.
My example:
hidden link
Your view:
hidden link
Please note that in my example there is no "wrap" or "pad" attribute used with "wpv-loop" tag and there are no repeated blocks added through the "wpv-item" shortcode. The loop should only be outputting the div with Bootstrap grid classes, at the same level.
regards,
Waqar
Hi Waqar,
Right...sorry, Got it!
Basically took all my code out and replaces it with yours. I works like a charm however...see the third column.
There seems to be a white space, or something. causing the third column to be lower.
I've tried to see what this is and can't work it out.
hidden link
Hi Pete,
Thanks for the update and glad that it is sorted out now.
I do see some strange non-breaking spaces being inserted in the view's output.
( screenshot: hidden link )
Can you please share temporary admin login details, so that I can see how the view is set up in the back-end?
Note: I've set your next reply as private.
regards,
Waqar
Hi Pete,
Thank you for sharing the admin access.
During troubleshooting, I noticed that at the start of each line in the "Loop Editor" section of the view, some weird hidden/invisible empty characters existed.
( it is possible that the code was copied and pasted from a different editor before being placed in there )
I've replaced them with the regular spaces/tabs and the view's output is now fixed.
regards,
Waqar
Hey Waqar,
No, thank you for your time.
This View would have been duplicated from another and changed to display slightly different. I guess this, while works when we keep to the same layout, probably shouldn't have been done this way. Sorry, I should have thought of that.
Looks and works great...many many thanks.
I did ask on a Facebook forum ref this before troubling you guys, everyone said it couldn't be done. You've proved them all wrong and I'm grateful for your help once again.
Thank you again Waqar. I'll close this ticket and mark it resolved.
Stay safe in your part of the world.
My issue is resolved now. Thank you!
