Creating horizontally scrollable elements transforms how you display products, reviews, or other content. Instead of stacking items vertically and taking up huge amounts of page height, this feature allows users to swipe or scroll through content side-by-side.
This is standard practice in modern app design (think of Netflix or Instagram) and makes your store feel significantly more polished on mobile devices.
How It Works
To enable this feature, you apply specific CSS classes to your Kadence Blocks (Row Layout, Section, or Query Loop). The system requires two things to work:
- Activation Class: Tells the block to scroll instead of wrap.
- Width Class: Tells the items inside how wide they should be (otherwise they might get squished).
Step 1: Choose Your Scope (Activation)
Decide where you want the scrolling to happen. Add one of the following classes to your block’s “Additional CSS class(es)” field:
horizontal-scrolling
Standard behavior: Elements scroll on Mobile and Tablet, but stack normally on Desktop.horizontal-scrolling-all-screensizes
All devices: Elements scroll horizontally on every device, including large desktop monitors.
Step 2: Define Item Width (Required)
For scrolling to work smoothly, the items need a fixed width. Choose a size that fits your content. You must pick the class that matches your activation scope from Step 1.
If using standard “horizontal-scrolling” (Mobile/Tablet):
element-width-sm(approx. 152px wide) – Good for small thumbnails or logos.element-width-md(approx. 288px wide) – Perfect for standard Product Cards.element-width-lg(approx. 368px wide) – Best for large banners or blog posts.
If using “horizontal-scrolling-all-screensizes” (Desktop included):
element-width-sm-all-screensizeselement-width-md-all-screensizeselement-width-lg-all-screensizes
Step 3: Styling & Behavior (Optional)
You can combine the classes above with these optional extras to refine the look and feel. Add these to the same block:
Scrollbars
scrollbar-visible
Displays a standard styled scrollbar below the content to indicate more items are available.scrollbar-visible-light
Displays a lighter, more subtle scrollbar (better for dark backgrounds).
Desktop Usability
drag-scroll-container
Highly Recommended for Desktop: By default, desktop users must use a mouse wheel or trackpad to scroll horizontally. This class enables “Grab and Drag” behavior, allowing users to click and drag the row with their mouse, just like on a phone touchscreen.
Example Configuration
If you want to create a “Bestsellers” slider that works on all devices, has product-sized cards, and shows a scrollbar, you would add these three classes to your Query Loop block:
horizontal-scrolling-all-screensizes element-width-md-all-screensizes scrollbar-visible
