Number of blog items to display depending on screen size

[cvdw]

I want to vary the number of items to display per screen size beakpoint.
Larger than 979 - 3 items
767-979 - 2 items
Smaller than 767 - 1 item.

I always do this by creating 1 row looper provider with the Query Builder and then 3 different columns as Looper consumer with 3,2 and 1 item and hiding these columns during the breakpoints.

Now that works fine when I want to tower 3 items and 1 item but when I want to show 2 between 767 and 979 it somehow doesn’t work… Only 1 column is displayed and in Cornerstone {{dc:post:title}} seems to display the page title. At the front end nothing is displayed until the size is below 767, 1 is displayed again. I’ve done it this way before but I can’t figure out why it doesn’t work now.

I’ve created a test page here:

Blog example - DH Adviesgroep Hypotheekadvies

I’ll also send you a login so you can take a look.

Thanks in advance, Carel

[ruenel]

Hey Carel,

Thanks for posting in! In your Looper Consumer, you will have to enable the “Rewind” option.

Best Regards.

[cvdw]

THX! I totally missed this option and haven’t used it before. I don’t think it is in any of the documentation also…
But it works! THX!

[ruenel]

You are most welcome, @cvdw.
I am glad we are able to help you out.