Center Alignment for Category Carousel with Fewer Items

We are using the “Category Carousel” element on our shop page and have set it to display 5 items per view in a grid layout. However, when a category has fewer than 5 sub-categories to display, is it possible to center-align these items? For example, please see the attached screenshot—when viewing a category with 4 sub-categories, we would like these items to be centered, without the empty space on the right.

Hello,

Could you please elaborate on your concern more with some useful Screenshots so that we can better understand and assist you accordingly of what you actually want.

Best Regards.

Hello, I just attached

Attachments:

You must be logged in to view attached files.

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for Desktop:

.wd-carousel-wrap, .wd-cats .products .woocommerce .columns-4 .wd-cats-element .wd-carousel-container {
    display: flex !important;
   justify-content:center !important;
}

Best Regards.

CSS helped a lot, and it turned out as we wanted, but another bug has emerged. In categories with more than 5 items, the arrows for scrolling the carousel appear. However, it doesn’t stop correctly and leaves a large gap at the end. Please check the video

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

I attached

Hello,

Your given login details are not working. Please give me the correct login details of your site so I will check and give you the possible solution.

Best Regards.

[Aizaz Imtiaz Awan]

Sorry, now I attached the correct

• This reply was modified 9 months ago by Aizaz Imtiaz Awan.

Hello,

Please check it now after removing the browser cache.

I have made 2 changes, first I have edited the Layout >> Edit the Product category element >> from the carousel settings >> Enable the sider loop: https://ibb.co/wYKqBZz

Then secondly, I have adjusted the custom CSS code as I have given earlier.

Best Regards.

[Author]

Posts