#749 – carrousel mode

 hi,
After update to Joomla 3.10.1 the galleries in carrousel-mode do not work as intended: the single images in the carrousel are always enlarged to more than 100%. Where is the error?
thank you and best regards
wolf.

Hi Wolfgang,

This sounds like a CSS issue. Is there a link to the page with the issue?

Regards

Hi Lefteris,
you are riright, it seems to be an css issue.
Normally the picture in the carrousel ist floating to the left. To prevent this I added the css:
.showtime-carousel .showtime-image img {
outline: solid 1px transparent;
border: 1px solid #fff;
box-shadow: rgba(0, 0, 0, .13) 0 1px 14px, rgba(0, 0, 0, .12) 0 0 0 1px;
margin: 0 auto;
}
This works fine, but after the update to 3.10.1 got the issue (same thing on several websites) .
Now I added :
width:50%;
to the code above. I think it works but i dont know if there is a better solution.
best regards,
Wolf.
more: dev.andrea-sandner.de

Hi Wolfgang,

Normally you don't need to add any CSS. All the required CSS is added by the extension.
But since the CSS you added makes it look as you wish, you can keep it.

Also keep in mind that the carousel is responsive. If for some reason the container of the carousel got bigger after the update, then it's normal to have larger images.
If you want to tweak this you can check the options of the carousel. You can even add responsive options there to define how many images should be displayed etc.

I am still not sure about what's caused this. But I guess some CSS code of your site just got lost after the update. Have you removed, disabled or updated any other extensions or your template?

Regards

Hi Lefteris
without additional css all of the carousels looks like:
https://dev.andrea-sandner.de/monofrotts.html
I updated to Joomla 3.10.1 and to Joomshaper Helix 2.0.2
regards, Wolf.

I don't see any issues. It's just a large carousel and some of the photos have portrait orientation. However I cannot know what's the desired result you are trying to achieve.
If you want the images to have their actual size then you can just use the following CSS code:

.showtime-carousel .showtime-image img {width:auto}

Alternatively adding a maximum width to container may also make things look better:

.showtime-carousel {max-width: 400px;margin: 0 auto;}

It all depends on what you are trying to achieve.

Regards