CMS Item Limit Based on Breakpoints

It would be very useful to have the item limit change based on the breakpoint.

  • Michael Ericsson
  • Jan 7 2020
  • Reviewed
CMS
  • Jordan Hughes commented
    5 May, 2020 03:19am

    Another way to tackle this is adding an embed with a bit of custom CSS to set a limit hide the extra unwanted CMS items at different breakpoints. However, the smallest breakpoint needs to be the largest number with this solution.

    As an example, this will show 15 items for <1440px displays, 12 items for 1440-1919px displays, and 14 items for 1920px+ displays:

    <style>

    @media screen and (max-width: 1439px) {

    .collection-items-class-name :nth-child(n+16) {

    display: none;

    }

    }

    @media screen and (max-width: 1919px) and (min-width: 1440px) {

    .collection-items-class-name :nth-child(n+13) {

    display: none;

    }

    }

    @media screen and (min-width: 1920px) {

    .collection-items-class-name :nth-child(n+15) {

    display: none;

    }

    }

    </style>

  • Jordan Hughes commented
    10 Apr, 2020 03:25am

    This would be helpful. As a workaround, I've duplicated the CMS collections for each breakpoint with their own limits, then setting display:none to the duplicates not in use at each breakpoint.

    Drastically slows down the designer and is a pain to maintain.

  • Eugene Hood commented
    29 Jan, 2020 09:17pm

    I agree that Limit Based on Breakpoints will be very useful, but what about the site?

  • +16