[Resolved] Responsive view

[Author]

Posts

[nickW-7]

Tell us what you are trying to do?
I want my view to be responsive on tablet and mobile. Right now, I have a view that displays 4 posts. For tablet, I want it to display 3 and for mobile I want it to display 2.

Is there any documentation that you are following?
Here is my view:
[wpv-layout-start]
[wpv-items-found]
<div class="clearfix">
<div id="thumb-slider" class="thumbcarousel carousel slide" data-interval="false">
<div class="carousel-inner">
<!-- wpv-loop-start -->
<wpv-loop wrap="4">
[wpv-item index=1]
<div class="carousel-item [wpv-conditional if="( '[wpv-loop-index offset="-1"]' eq '0' )"] active[/wpv-conditional]">
[wpv-post-body view_template="portfolio-single-thumb"]
[wpv-item index=other]
[wpv-post-body view_template="portfolio-single-thumb"]
[wpv-item index=4]
[wpv-post-body view_template="portfolio-single-thumb"]
</div>
</wpv-loop>
<!-- wpv-loop-end -->
</div><!-- /carousel-inner -->
[wpv-conditional if="( '[wpv-post-count]' gt '4' )"]


[/wpv-conditional]
</div><!-- /thumbcarousel -->
</div>
[/wpv-items-found]
[wpv-layout-end]

Is there a similar example that we can see?
No

What is the link to your site?
hidden link

[Shane]

Hi Nick,

Thank you for getting in touch.

Unfortunately this won't be possible to do. Mainly because you won't be able to change the number of items per page from the view itself.

Are you inserting the view into a block type layout or any custom layouts using a Page builder? I may have a way to get around this issue.

However it would involve creating 2 additional views. What i'm thinking is to make use of the mobile display option that the blocks have where you can set a block to only display on mobile, tablet or desktop . See Screenshot

Please let me know what you think of this and if you need assistance setting this up.

Thanks,
Shane

[nickW-7]

Yes, I am using a page builder and adding the view to a block section. I understand what you are saying by creating 2 more views for each device and hiding them. How do I edit the view code to show the number of items I want?

[Shane]

Hi Nick,

There is a Pagination and slider settings on the view settings that will allow you to determine the number of items per page. See Screenshot

Once you do this you will be able to determine the number of items per page in your view.

Thanks,
Shane

[nickW-7]

Hi Shane,

I was able to limit the number of items shown to (2) on mobile. Now, the problem I'm facing is that the left and right buttons on the slider will not work when one view is under another view. It seems like the script will only run once for the first view at the top of the page, but not the second one. I tested this by switching the views around.

[Shane]

Hi Nick,

Can you send me a link to where you are testing this out as well as admin access to see how you've set this up ?

Thanks,
Shane

[Shane]

Hi Nick,

Thank you for the credentials. However can you point me to the exact page where you are running the multiple view tests?

Thanks,
Shane

[nickW-7]

hidden link

[Shane]

Hi Nick,

Not sure how you were able to get the pagination setup on both your views but I can see where on the view there isn't any pagination control settings enabled.
hidden link

I've enabled it on the one below however, you will need to use the pagination settings to setup the number of items per page.
hidden link

As well as use our pagination shortcodes, ofcourse you can make use of some custom code to style the pagination however you like it but this is why it isn't working.

I did a test on my end with 2 views and they both work when using our default pagination shortcode.

Please let me know if this helps.
Thanks,
Shane

[nickW-7]

Hi Shane, for some reason I was not able to reply to this thread for days it wouldn't give me the option. (See attached)
Anyway... I think I understand what you are wanting me to do with the pagination but I'm not sure how to do it on my end. Could you give me instructions? Thanks.

[Shane]

Hi Nick,

Right now the pagination options for both views are disabled.

To enable them you will need to scroll to the top of the page until you see screen options on the view, from there you will need to enable the "Pagination and Sliders Settings" Once you've done this you can then scroll down until you see the Pagination and Slider settings.

With this you can now begin to customize how many items you want to display per page. Once you've done this then you can go to the Loop editor and then add the pagination buttons.

Once you've done this please let me know if there are any issues.
Thanks,
Shane