[Résolu] Changing responsiveness from 3 column to 1 column; to 3 to 2 to 1.

[Auteur]

Publications

[larryB-3]

Tell us what you are trying to do? I have a view that has the code below. It looks great on desktop, laptop and mobile, but the in between devices like iPad portrait it doesn't look good. It goes from 3 columns on every device to 1 column on mobile. How do I adjust this code to go from 3 to 1; to 3 columns, then 2 columns, then finally 1 column. I've attached screen shots at multiple screen sizes to show you more in detail.

<!-- wpv-loop-start -->
<wpv-loop wrap="3" pad="true">
[wpv-item index=1]
<div class="row">
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Artist-Work"]</div>
[wpv-item index=other]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Artist-Work"]</div>
[wpv-item index=3]
<div class="col-sm-4">[wpv-post-body view_template="Loop item in Artist-Work"]</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 -->

I was using Bootstrap 3, but told Toolset to use Bootstrap 4 now thinking that would help, but nothing really changed. I also have other views where I start with 4 columns and end up with 1 with nothing in the middle, either. How would I go from 4, to 3, to 2, to 1 instead of just 4 to 1.

<!-- wpv-loop-start -->
<div class="container">
<wpv-loop wrap="4" pad="true">
[wpv-item index=1]
<div class="row">
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Art"]</div>
[wpv-item index=other]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Art"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in All Art"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>
</div>
<!-- wpv-loop-end -->

Is there a similar example that we can see? This article talks about adjusting down from 4 columns to 2 columns, but doesn't actually provide any code examples to use https://toolset.com/documentation/user-guides/creating-responsive-designs/

What is the link to your site? lien caché for the 3 column example and lien caché for the 4 column example.

[Nigel]

Hi Larry

When you use the Loop Wizard to set up the output of a View as a Bootstrap grid the options available in the UI and the resulting markup only allow for a certain number of columns collapsing to a single stack on smaller screens.

A more refined approach is possible with the Bootstrap grid, but when combining this with how a View dynamically generates the markup you will need to intervene manually in the setup in the context of limitations which arise from how Bootstrap uses rows.

Let's look at the markup inserted into the Loop Editor for a 4-column grid:

	<!-- wpv-loop-start -->
	<div class="container wpv-loop js-wpv-loop">
	<wpv-loop wrap="4" pad="true">
		[wpv-item index=1]
		<div class="row ">
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-bs-grid-of-things"]</div>
		[wpv-item index=other]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-bs-grid-of-things"]</div>
		[wpv-item index=4]
			<div class="col-md-3">[wpv-post-body view_template="loop-item-in-bs-grid-of-things"]</div>
		</div>
	</wpv-loop>

Note, I'm using BS4 in this example, and I've omitted the padding items for simplicity.

Bootstrap grids operate using rows.

With a four-column grid every 4 column entries (e.g. div with col class) are wrapped in a div class = row.

So the actual HTML produced looks something like this:

<div class="row ">
    <div class="col-md-3">Non iusto asperiores est explicabo autem</div>
    <div class="col-md-3">Repellendus rerum autem molestiae ut sit qui</div>
    <div class="col-md-3">Quo nulla voluptate recusandae</div>
    <div class="col-md-3">Sit in labore qui quod veniam</div>
</div>
<div class="row ">
    <div class="col-md-3">Voluptatem excepturi quia molestiae</div>
    <div class="col-md-3">Ea maiores nihil fugiat</div>
    <div class="col-md-3">Aperiam a sed consequatur provident</div>
    <div class="col-md-3">Harum enim nemo quasi</div>
</div>
...
...

See? Every row has 4 columns, on medium-sized screens and above.

Now if you want 3 columns on small screens you need the markup to look like this:

<div class="row ">
    <div class="col-md-3">Non iusto asperiores est explicabo autem</div>
    <div class="col-md-3">Repellendus rerum autem molestiae ut sit qui</div>
    <div class="col-md-3">Quo nulla voluptate recusandae</div>
</div>
<div class="row ">
    <div class="col-md-3">Sit in labore qui quod veniam</div>
    <div class="col-md-3">Voluptatem excepturi quia molestiae</div>
    <div class="col-md-3">Ea maiores nihil fugiat</div>
</div>
<div class="row">
    <div class="col-md-3">Aperiam a sed consequatur provident</div>
    <div class="col-md-3">Harum enim nemo quasi</div>
    ...
</div>

It's not just a question of modifying the classnames (or choosing some classes for smallest screens and different classes for larger screens on the same divs), you also need to modify the markup structure itself to include a different number of columns.

And that is problematic when you want different numbers of column divs within each row div for different screen sizes.

Now, I'm mentioning four columns as a starting point here, because if you stuff too many columns into a markup row they will overflow onto the next visual row.

Which means when you set this up on larger screens

1    2    3    4
5    6    7    8

and view it on a smaller screen you can achieve this

1    2
3    4
5    6
7    8

but if you try to use 3 columns mimicking 2 columns you end up going from this

1    2    3
4    5    6

to this

1    2
3
4    5
6

In terms of implementation, where there are divs with class col-md-3 in the code above I need to manually add classes of col-sm-6 to the same divs.

That way on medium screens and above I have four columns, on small screens two, and on smaller screens just one.

You could also do, for example, 6 to 3 to 1.

But you cannot do 3 to 2 to 1, which you originally enquired about.

[larryB-3]

My issue is resolved now. Thank you!