Animated typing element has a slight jump up

How To
1

Hello everyone

I am using the animated typing element for a heading.

On desktop version it all looks good because it has enough space, but on mobile the text jumps slightly up when the text wraps to a new line.

Here’s the video so you can see what I mean (I’m sorry about the quality, I’m in a bit of a rush)

The structure is this:

Section > Container > animated typing element

I noticed if I remove justify-content from the section, then this won’t happen but in that case the animated typing element will move to the top of the page and I am not able to center it at all without using flexbox or grid. And if I use flexbox or grid then this jump is inevitable.

I tried to set the line-height, to set the minimum-height on each element and to no avail.

Thank you in advance

2

Hi,
Welcome to the forum!

I don’t think there’s really any way to prevent that, unless you set the min-height of the animated-type element to roughly the height required on mobile devices. That would at least be a start…