Streaming live at 10am (PST)

Responsiveness: Can I limit collections differently across devices?

Hi, I need to set the number of items shown in a collection to a certain [high] number on desktop view and and certain [lower] number on mobile.

This needs to happen because our users don’t want to scroll through tons of articles on their phone but NEED to see more articles on the desktop view.

When I set the limit in the collection’s on-page settings, the limit holds in all device versions. Theoretically, this is nice but responsively, this is a nightmare.

Is there a handy trick that I’m missing to accomplish showing a different number of items in a collection per device type?

Thanks in advance!

Website is member access only and thus I cannot share it publicly. Duplicating the issue on a dummy site isn’t necessary but I can oblige if helpful.

Hmmm… great question! Boy you came up with a new one I haven’t heard. Maybe someone else in the community has. But I’ll take a leap.

On Desktop view when you set the limit items, then go to tablet and set the items there. It changes the Desktop view items? Because it shouldn’t. The settings cascade down not up.

Yeah so basically what I originally did is set the desktop version’s collection limitation settings to show only 20 articles.

Then I went down to mobile (where it matters most to me) and set the collection to show only 6.

I go back to desktop to make sure all is well…and all is showing only 6 :frowning:

Hopefully this is a one-off issue because other design variations are kept on different device type versions so as long as you start at desktop and make your changes on the way down to mobile.

In the meantime, I have done this:

  1. Duplicate the collection on desktop view
  2. Rename the duplicated collection (so that I can change the limitation settings)
  3. Change the limitation settings to the lower number
  4. Hide the duplicated collection on desktop view, show the original collection on desktop view
  5. Go to the mobile view. Show the duplicated collection on mobile view, hide the original collection on mobile view

This works for me, for now…but I imagine that this won’t work long-term considering that this method increases the ‘collections allowable on-page’ cap as well as cumbersomely time consuming :sweat: so a more permanent fix is still in need.

1 Like

I see, hmm that sounds pretty good actually. Have you tried simply adding the collection to Desktop, in settings only check Desktop.

Then go to Tablet (nothing is there), create the collection on Tablet with different class name (Collection-Tablet or something), Then check tablet in settings.

Now both will not connect. This will however allow you to adjust content because they can have same styles, but the wrapper or divs won’t.

Logically, this makes sense, I don’t have an example but I think it would simplify your work long-term. In essence, you’re duplicating wrappers not content. It could work :mage:

Logically that actually might work in the future, if I’m starting ground up with new collections. I’ll keep this in mind! :slight_smile:

I already added all my collections before I realized my client wanted them limited on mobile though, so duplicating them, renaming them, then using display none/block worked out swiftly. :slight_smile:

Thanks for all your brainstorming!

Awesome! That was a great work-around, you’re quick on the feet :grin: Have fun, holler at me later if you need help.

1 Like