I am trying to: Set layout so three columns on desktop, two on tablet, one on mobile.
Link to a page where the issue can be seen: hidden link
I expected to see: Three columns on desktop, two on tablet, one on mobile.
Instead, I got: Desktop has three columns but each row has a different indent? Can't get two columns on tablet working.
Please help!
Hi, it looks like there is a markup issue because if you look at the page source you can see that each row is nested inside the previous row. That usually indicates an unmatched or unclosed div tag somewhere in the loop or the loop template. If you're not able to see anything obvious, please copy + paste the entire contents of the Loop Editor here for me to review. If you're using a template inside the loop, please paste those contents here as well.
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<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=3]
<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>
</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]
Loop item:
<div class="storypreview">
<h4>[wpv-post-link]<br></h4>
<h5>[types field="storysubcategory"][/types] | [types field="storyabout"][/types]</h5>
[types field="image" class="storyimage"][/types]
<br><h6>[types field="snippet"][/types]
[wpv-post-read-more]</h6>
</div>
Thanks for your help
You're missing a closing div tag at the end of the item index=3. When wrap=3, the third item should include a closing div tag to close the row. Here's the updated code:
[wpv-layout-start]
[wpv-items-found]
<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row ">
<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=3]
<div class="col-sm-6 col-md-4">[wpv-post-body view_template="loop-item-in-all-personal-stories"]</div>
</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>
</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]
Thanks, that's remediated the indent issue.
However, when switching to tablet mode where there are two stories per row, there is one left hanging. Two stories in first row, one in second [repeat].
Is there a way round that?
That's how Bootstrap's grid works, in general. It doesn't break one row apart to fill in space left by the previous row:
https://getbootstrap.com/docs/3.3/css/#grid
You can try removing the div with the row class, and removing the corresponding closing div tags in index=3 and index=pad-last. Without the row div, the cells can flow freely from one row to the next.
