Item Counts & Columns

This page demonstrates how Item Counts & Columns let you control how many items and columns are displayed per device using Divi Responsive Helper.

Blog Module – Column Layout & Spacing

This example demonstrates how the Blog module layout adapts across breakpoints by changing the number of columns and the spacing between them. On larger screens, the layout maintains four columns, while smaller screens progressively reduce the column count and adjust spacing for better readability.

• Ultra-Wide: 5 columns
• Wide Screen: 4 columns
• Desktop: 3 columns, 15px space between columns
• Tablet: 3 columns, 30px space between columns
• Phone Wide: 2 columns
• Phone: 1 column, 10px space between columns

Portfolio Module – Project Count Per Device

This example shows how the number of portfolio items displayed can be controlled per breakpoint. More projects are shown on larger screens, while smaller screens display fewer items to keep the layout clean and easy to scan.

• Ultra-Wide: 8 projects
• Wide Screen: 6 projects
• Desktop: 4 projects
• Tablet: 2 projects
• Phone: 1 projects

Woo Products Module – Product Count & Column Layout

This example combines both item count and column layout control for WooCommerce products. Larger screens display more products in wider grids, while smaller screens reduce both the number of products and columns to create a focused shopping experience.

• Ultra-Wide: 6 columns, 9 products
• Wide Screen: 5 columns, 8 products
• Desktop: 4 columns, 15px space between columns, 8 products
• Tablet: 3 columns, 30px space between columns, 6 products
• Phone: 1 column, 10px space between columns, 4 products

Note: Resize the browser window or switch device views to see how item counts and column layouts adjust automatically at each breakpoint.