Archived topic
Set different query loop logic for desktop and mobile
4 replies · Started by Dmitrii on July 3, 2022
I'm using GenerateBlocks to display posts from different categories on my homepage, but I want to set different query loop logic depending on what device a user is on.
On desktop, I want a user to see 4 posts in a row (from a specific category).
On mobile, I want a user to see 3 posts in a row (from the same category).
I've tried switching to mobile mode but it seems the query loop function applies to all device types.
Any suggestions or workarounds?
Thanks!
The only solution that came to mind was to build everything separately for desktop/tablet/mobile and just hide the containers depending on the device type.
But not sure if there's an easier way...
Hi there,
the Query Loop has the same behaviour as GB Grid Block, you can set the grid item Container and set its % width to what you require. eg. 25% ( 4 columns ) Desktop and 33% ( 3 columns ) mobile:
https://www.screencast.com/t/Xz8rzYKyL7
What you cannot do is change the Query loop parameters for different device sizes.
If you want a query loop that shows only 4 posts on Desktop and only 3 on mobile then you would need multiple query loops
Multiple query loops worked perfectly, thanks.
Glad to hear that works for you
