Carousel: responsive height without changing position of captions

[billo3D]

Hi,

I am searching for a way to constrain the height of the carousel to browser height without the positioning of numbers and image captions being affected, and without filling the slides. I can temporally replicate this in the browser by changing the computed paddin-bottom style on the .lay-carousel element. Am I missing something?

Any help much appreciated!
Thanks!
Anna

This is how I would like it to look like:

[Richard]

Dear Anna @billo3D

I think i understand, apologies if i dont :)

If you are able to get the desired result by altering the .lay-carousel element, can you not add this into:

Lay Options > Custom CSS & HTML > Custom CSS

E.g

.lay-carousel{
padding-bottom:insert-desired-%-or-px-here;
}

Or it must come strictly through built in options?
I think you find like i do that the Captions element, being contained within the Larger Carousel Container element means that they will move together.

Talk soon & best wishes Anna :)

Richard

[billo3D]

Hi Richard,

thanks so much for your quick response!
Unfortunately the CSS doesn't affect anything. I guess a built-in padding-bottom overwrites any CSS.

I then tried to manipulate via javascript:

var element = document.getElementsByClassName('lay-carousel');
        console.log(element[0]);
        element[0].style.paddingBottom  = '20vh';

This overwrites the built-in function, however shifts captions and numbers

Thanks for help!!
Have a good day,
Anna

[Richard]

Dear Anna
@billo3D

Using !important at the end of your CSS rule gives it precedence, sorry i should have mentioned that!

Please let me know if it helps E.g:

.lay-carousel{
padding-bottom: 99px !important;
}

Best
Richard