# CMS Load- Paginate on desktop and infinite scroll on mobile

**URL:** <https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761>\
**Category:** Attributes\
**Tags:** cmsload\
**Created:** [April 12, 2024, 1:08pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761 "2024-04-12T13:08:29Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![claudine](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/claudine/32/2205_2.png) [@claudine](https://forum.finsweet.com/u/claudine)\
**Post date:** [April 12, 2024, 1:08pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/1 "2024-04-12T13:08:29Z")

</div>

Hi,

Is it possible to have collection items paginate on desktop and infinite scroll on mobile? I’m using CMS Load.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [April 16, 2024, 8:02pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/2 "2024-04-16T20:02:46Z")

</div>

Hey @claudine! I’m afraid this is not possible as you can only have `fs-cmsload-mode` once per CMS Collection. You could however add a second collection list only visible for mobile breakpoints and add a CMS Load instance set to infinite.

The only issue is the repetition of content on the same page 😕

---

<div class="post-metadata">

**Author:** ![claudine](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/claudine/32/2205_2.png) [@claudine](https://forum.finsweet.com/u/claudine)\
**Post date:** [May 7, 2024, 12:12pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/3 "2024-05-07T12:12:44Z")

</div>

Ok, I don’t know how I could do that because I’m using filters on the collection and they won’t work on a different one (if I created one for mobile).

Or is there a way around that?

If not, which CMS load would you recommend using?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 10, 2024, 7:33pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/4 "2024-05-10T19:33:38Z")

</div>

@claudine You could also have a different filter setup.

However, I think my original answer may not be completely correct. We may be able to change the value of the `fs-cmsload-mode` attribute depending on the breakpoint and then initialize the whole Attribute.

Could you share a live link?

---

<div class="post-metadata">

**Author:** ![claudine](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/claudine/32/2205_2.png) [@claudine](https://forum.finsweet.com/u/claudine)\
**Post date:** [May 16, 2024, 3:37pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/5 "2024-05-16T15:37:37Z")

</div>

Great!

The live link is [**here**](https://empire-recruitment.webflow.io/jobs).

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [May 17, 2024, 11:28pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/6 "2024-05-17T23:28:13Z")

</div>

Hey @claudine! Can you please test this?

```js
<script>
  const breakpoints = {
    small: '(max-width: 576px)',
    medium: '(min-width: 577px) and (max-width: 768px)',
    large: '(min-width: 769px) and (max-width: 992px)',
    extraLarge: '(min-width: 993px)',
  };

  function getCurrentBreakpoint() {
    for (const [breakpoint, mediaQuery] of Object.entries(breakpoints)) {
      if (window.matchMedia(mediaQuery).matches) {
        return breakpoint;
      }
    }
    return 'unknown';
  }

  function setLoadMode() {
    const list = document.querySelector("[fs-cmsload-element='list']");
    if (!list) {
      console.error("Element with [fs-cmsload-element='list'] not found.");
      return;
    }

    const breakpoint = getCurrentBreakpoint();

    if (breakpoint === 'small' || breakpoint === 'medium') {
      list.setAttribute('fs-cmsload-mode', 'infinite');
    } else {
      list.setAttribute('fs-cmsload-mode', 'pagination');
    }
    console.log('Current mode:', list.getAttribute('fs-cmsload-mode'));
  }

  setLoadMode();
</script>

```

---

<div class="post-metadata">

**Author:** ![claudine](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/claudine/32/2205_2.png) [@claudine](https://forum.finsweet.com/u/claudine)\
**Post date:** [May 30, 2024, 12:34pm UTC](https://forum.finsweet.com/t/cms-load-paginate-on-desktop-and-infinite-scroll-on-mobile/2761/7 "2024-05-30T12:34:09Z")

</div>

Works perfectly, thank you!