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) {
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.
Michael Ericsson
.svg){kind=logo}
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>
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.
I agree that Limit Based on Breakpoints will be very useful, but what about the site?