-
I currently have 6 blog posts showing up on my homepage using the Post Query: https://www.ecomm-alliance.org.
What’s the best way to change the number of posts that show on mobile and tablet?
For example, 6 posts is way to many to scroll through on mobile – so I’d like only 2 or 3 to show instead. Same for tablet – probably only have 4 show there.
-
Hi there,
Do you have GB Pro? If so, you can create a global style to hide 3 posts on mobile.
If not, try this CSS:
@media(max-width: 768px) { .gb-looper-62a8bcae >:is(.gb-loop-item:nth-child(4),.gb-loop-item:nth-child(5),.gb-loop-item:nth-child(6)) { display: none; } } -
Yes, I do have GB Pro. How would that process work exactly?
-
1. Select the query block, enter a new Global style class, eg.
reduce-posts-on-mobile, click Create.
https://app.screencast.com/tbZmjbseIsiTX2. Choose Blank style, click Start editing.
3. global style
reduce-posts-on-mobile, the MORE button at the top right of the right sidebar, click +NEW, enter:is(.gb-loop-item:nth-child(4),.gb-loop-item:nth-child(5),.gb-loop-item:nth-child(6))to the selector field.4. For the selector
.reduce-posts-on-mobile :is(.gb-loop-item:nth-child(4),.gb-loop-item:nth-child(5),.gb-loop-item:nth-child(6)), setdisplaytononeon mobile, it will hide the 4th,5th and 6th posts in the query loop on mobile.
https://app.screencast.com/JqIe8pFYpU1uDYou can use the global style on other query block if you want to do the same for mobile.
-
That worked perfectly – thanks so much!!!
-
You are welcome 🙂
- You must be logged in to reply to this topic.