Jetengine Listing Grid: Custom Column Numbers

Jetengine Listing Grid: Custom Column Numbers

Short Intro:

Control the number of columns on a Jetengine listing grid

Problem:

The Jetengine listing grid column number is limited from 1-10 and Auto. There is no way to input a specific number or width for the column.

Solution:

If you want more control over the number of columns in the listing grid, you can add this to the listing grid widget:

selector .jet-listing .slick-list {
overflow: visible;
max-width: 67% !important;
}

You can set the max width to how big or how many columns you want. For example, if you want 3 columns, you can use 33%. You can also use pixels that are more responsive because, at smaller screens, it will automatically occupy 100%. Note: Make sure that you also set media queries if you want to change the column number for smaller screens.

if you want to hide the overflow on one side, you can add this to the container:
selector {
clip-path: inset( 0 -100vw 0 0 );
}

Contact details

More solutions

by ilias

You're using JetFormBuilder and want to make sure users are at least 18 years old based on their birthday input.

by ilias

Roweij Spices wanted to have a filter that can choose number of products display per pagination

by ilias

This article will show you how to add dynamic code to your templates using the Elementor Shortcode widget and custom PHP code.