Carousel Text Alignment (Baseline Consistency)

[MWPA]

Hi everyone,

I'm working on a text-based carousel that displays a series of typographic statements. Each statement has a different line length, and I want to ensure that the first line of each statement aligns consistently on the same baseline.

Right now, it seems that each text block is placed in its own container with independent positioning and alignment. As a result, the text shifts vertically, creating a visually inconsistent and restless appearance.

Is there a way to make sure that the first line of every statement starts at the same baseline, regardless of the total height of the text block?

Thanks in advance for any insights!

[arminunruh]

do you have a link please?
i think for texts you can align them top mid or bottom

maybe we could use align top, and then use some padding top css
like:

.slide-text{
    padding-top: 50px;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css"

and then you can change the value 50 to sth higher if you like

[MWPA]

Thanks, Armin! This solution helps, but I’ve run into a few issues:

• The text appears inside a box, and when resizing the browser, the text gets cut off. This also happens on mobile (see screenshots for desktop/mobile).
• I want the text to be vertically centered in the visitor’s viewport, no matter their screen size. With this workaround, I don’t think that will work.

Do you have any suggestions for fixing this?

Screenshots:

[arminunruh]

how about you choose "fixed height" for the carousel
and as height enter: 100vh

this means 100 viewportheight

if you have a gridder frame top set (the pink bar at the top) this pushes it down if its in the first row

you can also set the fixed height to
100vh - 50px

if for example your frame top is 50px

.slide-text{
    padding-top: 50px;
    box-sizing: border-box;
}

also add box-sizing: border-box; to the css so the padding top wont make it grow longer

[MWPA]

Thanks, Armin. I found that the best approach to make it work was:

• Set the vertical alignment of the text slides to "Top."
• Select "Fixed Height" for the carousel.
• Set the height to 60vh.
• Align the carousel to the bottom of the row in the grid layout.