sit carousel captions at bottom of page

[alasdair17]

Hey @arminunruh

Couple of issues with carousel captions and using a button with captions.

I've finally got round to building my own personal website and I'm using the overlays and carousel mainly which are working great!

However, how can I get the captions and numbers to always sit fixed at the bottom of the page? I've tried using some css previously suggested but it doesn't work.

Also, when I use a button within the carousel caption editor it cuts off the top and bottom line of the rounded rectangle shape. If I change the code to 'display: inline-flex' it fixes it but then doesn't totally align with the numbers.

Here's a link: https://alasdairdimmick.com/lagoon/

Thanks!

[arminunruh]

damn just a month ago we had someone who we did this exact thing for and now i cant find the emails/website/forum topic anymore to just copy and paste the solution here.

I've tried using some css previously suggested but it doesn't work.

which forum post are you refering to? maybe it can lead me to what im trying to find

i would say

.lay-carousel-sink .single-caption-inner a.laybutton{
display:inline-block;
}

but then doesn't totally align with the numbers.

and then in lay options → carousel addon, adapt the "Space Top" value for "numbers"

[alasdair17]

@arminunruh thanks man, I did some digging:

http://laythemeforum.com:4567/topic/9263/carousel-caption-for-next-slide-showing-on-previous-slide?_=1695230053999

I tried the code from this thread but it just pushed the captions up a little and closer to the image.

http://laythemeforum.com:4567/topic/6421/carousel-caption-sticky-bottom-responsive?_=1695233450478

This code pushes the captions wider and slightly higher.

Haha not sure why it's not working but some guidance would be great Armin.

[arminunruh]

hey there, i was trying things out yesterday, i haven't gotten it to work yet

[arminunruh]

ok i found the reason why it doesn't work

i used
.col {
will-change: transform, opacity;
}

in lay theme's css to improve some animation performance, but this leads to position fixed not working

i'll release an update now

[arminunruh]

and then use this css

.lay-carousel-sink-parent {
    position: fixed;
    bottom: 2px;
    left: 2px;
    overflow: hidden;
}
.lay-captions-inner{
    overflow: hidden;
}

[alasdair17]

@arminunruh thanks, it's so close! they are sitting nicely at the bottom now but the button is now duplicated on the right hand side which hides the slide numbers?

[arminunruh]

.lay-carousel-sink-parent {
    position: fixed;
    bottom: 2px;
    left: 2px;
right: 2px;
    
}
.lay-captions-inner{
    
}
.single-caption{
overflow: hidden;
}

might work like this!

[alasdair17]

@arminunruh thanks armin but still the same!

[arminunruh]

ok mmh

can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

[alasdair17]

@arminunruh Thanks Armin. Email sent.

[arminunruh]

alright so it works if you set the left and right frame of the page that the carousel is in to the same values as

left: x: , right:X ;

i set it to 20px here

and
here:

.lay-carousel-sink-parent {
    position: fixed;
    bottom: 2px;
    left: 20px;
    right: 20px;
    
}
.lay-captions-inner{
    
}
.single-caption{
overflow: hidden;
}

[alasdair17]

@arminunruh thanks Armin, really appreciate it!