{"id":49372,"date":"2025-09-01T11:51:47","date_gmt":"2025-09-01T11:51:47","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49372"},"modified":"2025-09-01T11:51:47","modified_gmt":"2025-09-01T11:51:47","slug":"setting-different-number-of-posts-for-each-breakpoint","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/setting-different-number-of-posts-for-each-breakpoint\/","title":{"rendered":"How to Set a Different Number of Posts in a Listing Grid for Each Breakpoint"},"content":{"rendered":"\n

This guide describes how to configure a JetEngine<\/em> Listing Grid<\/strong><\/a> to display a different number of items (posts, terms, users, etc.) per page for specific screen width breakpoints (desktop, tablet, and mobile).\u00a0<\/p>\n\n\n\n

The setup is implemented using the Items Number Switcher<\/strong> filter of JetSmartFilters<\/em> in combination with a custom query<\/a>, and can be applied in Elementor, the WordPress block editor (Gutenberg), or Bricks.<\/p>\n\n\n\n

Enable the Items Number Filter External Module<\/h2>\n\n\n\n

Proceed to the WordPress Dashboard > JetEngine > <\/em><\/strong>JetEngine<\/em><\/strong><\/a> > Modules > External Modules <\/em><\/strong>tab and activate the Items Number Filter <\/strong>toggle. This module will be installed and activated as a separate plugin.<\/p>\n\n\n\n

\"items<\/a><\/div>\n\n\n\n

Create a Query<\/h2>\n\n\n\n

Proceed to WordPress Dashboard > JetEngine > Query Builder <\/em><\/strong>and create a custom query by pressing the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

Enter the query\u2019s Name<\/strong> and select the required Query Type<\/strong>. For example, we want to display posts from a Custom Post Type<\/strong><\/a>, so we pick the \u201cPosts Query<\/a>\u201d option.<\/p>\n\n\n\n

Then, enter the Custom Query ID <\/strong>that will be used later in the filter and Listing Grid<\/strong> settings. It should be unique and contain lowercase letters only, numbers, hyphens, or underscores.<\/p>\n\n\n\n

Finally, adjust other query settings according to your needs. For example, in the General<\/strong> tab of the Posts Query<\/strong> section, we specify \u201cJobs (Vacancies)\u201d as the Post Type<\/strong>.<\/p>\n\n\n\n

\"custom<\/a><\/div>\n\n\n\n

Create a Listing Template<\/h2>\n\n\n\n

Create a Listing<\/strong> template to display it later in a Listing Grid<\/strong>. In our case, we create a listing for posts as described in the How to Create a Listing Template for Post Types<\/strong><\/a> tutorial.<\/p>\n\n\n\n

Adjust the Items Number Switcher and Listing Grid<\/h2>\n\n\n\n
\n

Proceed to a page or template created with Elementor, WordPress block, or Bricks editor where you want to display items in a Listing Grid<\/strong>.<\/p>\n\n\n\n

Settings in Elementor<\/h3>\n\n\n\n

Find and place the Items Number Switcher<\/strong> widget and adjust its settings:<\/p>\n\n\n\n