Quote Slider with CSS, auto size container

[adrian.cares]

Hey ThemeX crew,

I would like to create a quote slider without using JS.
Therefore, I created a section with one column and animated the sliding quotes via CSS.

I used the following CSS

.item-1,
.item-2,
.item-3 {
position: absolute;
display: block;
text-align: center;
width: 80%;
padding: 3rem;
animation-duration: 15s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.item-1{
animation-name: anim-1;
}

.item-2{
animation-name: anim-2;
}

.item-3{
animation-name: anim-3;
}

@keyframes anim-1 {
0%, 8.3% { left: -100%; opacity: 0; }
8.3%,25% { left: 10%; opacity: 1; }
33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
0%, 33.33% { left: -100%; opacity: 0; }
41.63%, 58.29% { left: 10%; opacity: 1; }
66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
0%, 66.66% { left: -100%; opacity: 0; }
74.96%, 91.62% { left: 10%; opacity: 1; }
100% { left: 110%; opacity: 0; }
}

However, the container size doesn’t adapt to the text content on mobile. How can I fix this and always vertically center the text?

Thx.

[Joao]

Hi there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

I would suggest you using X Slider inside Cornerstone.

Thanks for understanding. Take care!