Issue with Flexible Carousel Advanced Type

[MAFMaxFabi]

I added a Flexible Carousel element to my page. I set 2 Items per page.

I then added a “Row” inside the Carousel as an item. Inside that “Row” element I added other elements. That’s where the issue occurs.

The whole content inside that row is only 50% in width. 2 Items per page means I have two full columns. But when I add that “Row” element one column is only half the side. One item now is 25% with content, 25% only white space. And another item 25% with content, 25% only white space.

When I only add elements (without that “Row”) it works fine.

I hope my explanation was clear enough. If not, feel free to contact me and I’ll try to explain it better.

Thank you

Topic

[Marius1989]

I could replicate your issue and it seems this is a simple stylesheet issue.
I guess it was just missed to add additional rules if you place another inner section inside the carousel.

The problem here is, that the carousel item gets the same width as the inner row as the same CSS rule applies. So the carousel content width is exactly 50%, as you already mentioned.

Should be fixed in an upcoming release. Here is a temporarily fix:

.grve-flexible-advanced-carousel[data-items="2"][data-slider-loop="no"] .grve-element, .grve-flexible-advanced-carousel[data-items="2"][data-slider-loop="no"] .grve-inner-section .grve-inner-section {
    width: 100%;
}

You might adjust this code if you change the amount of carousel items.
Please remove this snippet after the update. Hope that helps.

• This reply was modified 4 years, 5 months ago by Marius1989.
• This reply was modified 4 years, 5 months ago by Marius1989.

[Marius1989]

After some testing I want to add the following:

This code will work, no matter the amount of carousel items or carousel settings so you don’t have to adjust the snippet in specific cases.

.grve-flexible-advanced-carousel .grve-element, .grve-flexible-advanced-carousel .grve-inner-section .grve-inner-section {
    width: 100%!important;
}

[Marius1989]

@MAFMaxFabi this has been fixed in the recent update as per changelog of version 1.18.
I have tested it can confirm it works now as it should so I recommend to remove the code snippet in case you used it.

[Author]

Replies