[Resolved] Change wpv-loop wrap = "4" to wrap = "1" on the mobile device

[Author]

Posts

[kasparB]

I want the view slider to display differently on different devices. On desktop in 4 columns, on mobile devices in 1 (not 4 in a column, but only 1 slide).
What it looks like now:
<wpv-loop wrap="4" pad="false">
[wpv-item index=1]
<div class="row bottom-slider bslider-line">
<div class="col-md-3">[wpv-post-body view_template="artworks-in-collection-v2-slider-slide"]</div>
[wpv-item index=other]
<div class="col-md-3">[wpv-post-body view_template="artworks-in-collection-v2-slider-slide"]</div>
[wpv-item index=4]
<div class="col-md-3">[wpv-post-body view_template="artworks-in-collection-v2-slider-slide"]</div>
</div>
</div>
</wpv-loop>

On mobile, I want to receive:

<wpv-loop wrap="1" pad="true">
[wpv-item index=1]
<div class="row ">
<div class="col-md-12">[wpv-post-body view_template="artworks-in-collection-v2-slider-slide"]</div>
</div>
[wpv-item index=other]
<div class="col-md-12">[wpv-post-body view_template="artworks-in-collection-v2-slider-slide"]</div>
[wpv-item index=pad]
<div class="col-md-12"></div>
[wpv-item index=pad-last]
<div class="col-md-12"></div>
</div>
</wpv-loop>

Are there any ways to change this automatically? Or just by hiding and displaying views using CSS? Will there be conflicts in this case?

Nothing suitable could be found in the documentation.

Sample: hidden link

[Shane]

Hi Kaspar,

Thank you for getting in touch.

The best way to do this is to use css to load the view that is appropriate for your screen size.

So if you are viewing the page on mobiles then the css will only load the mobile view and vice-versa.

There shouldn't be any conflicts to doing this.

Thanks,
Shane

[kasparB]

Thank you, Shane.

I made two similar views with different number of slides per line. In layout I made separate blocks, hidden / displayed depending on the screen size. But on the mobile version, the block of archive objects is not displayed at all, as if not a single one was found.

What could be the problem?

[Shane]

Hi Kaspar,

Could you send me a link to the page as well as the css that you are using to switch between these?

Thanks,
Shane

[kasparB]

hidden link

@media screen and (min-width:801px) {
.hide-desk {display:none;}
}

@media screen and (max-width:800px) {
.hide-mobile {display:none;}
}

But if you look at the source code of the page, you can see that view does not produce data.

[Shane]

Hi Kaspar,

Thank you for the information.

Actually the mobile view does produce data. See Screenshot

As you can see the items are showing up on mobile view as intended and based on the css that was used.

Thanks,
Shane

[kasparB]

If you look in the browser debugger or source code, then in the bottom hour of the page you will see 4 rows with view, 2 of them have the .hide-mobile class and work fine, displaying the necessary data.
The other 2 are similar to the first, but with the class .hide-desk. So there is no data in them, although they should be.

Pay particular attention to the forms: wpv-filter-2924-CPID660 and wpv-filter-2618-CPID660

[Shane]

Hi Kasper,

I see what you mean now.

Would you mind providing me with admin access to the site so that I can have a further look at this for you.

Thanks,
Shane

[Shane]

Hi Kaspar,

Have a look now, this should now be working.

The problem was essentially your query filter. Have a look at my screenshot for what it should be.

Please let me know if everything is ok with the page.

Thanks,
Shane

[kasparB]

Hi, Shane!

Thanks you very much!
Now everything works. You are the best!

[kasparB]

My issue is resolved now. Thank you!