Headline Tex Typing setup

Support
#1

Hello,

I setup basic auto text typing for my 4 headlines in 4 columns.

I have no controls over the typed text. It has to be more readable meaning I either have auto typing below my static headline or the words typed inline without delay and more letters appear.

the problem is in the limit of the container in column. when I make 1/3 instead of 1/4 then all words appear in full. I have 4 columns, so the best solution is to have autotyping juts below headlines as reduced fonts are not readable. is it possible?

could you advise

#2

Hi there,

Kindly add the CSS code below to X > Launch > Options > CSS:

.x-text-content-text-primary .x-text-typing {
    display: block;
}

Thank you.

#3

Great change!!!

is it possible to change the font size of the headline but keep autotyping text in smaller font or opposite.

#4

Hi there,

Yes, you can do that by adding the CSS code below:

h1.x-text-content-text-primary .x-text-typing {
    font-size: 10px;
}

The CSS code above changes the font size of the Typewriter effect. Feel free to change the font size in the code. The font size of the Header itself can be changed directly from the headline element options in the Cornerstone.

Thank you.

#5

thank you very much

#6

You are very welcome!

#7

Hi,

When I checked the behaviour of the selftyping feature in mobile phone browser I noticed jigging just below for the rest of the page right down to the footer. Basically, when one of the selftyping column awaits for another word (empty liine) the move occurs. Pls check on mobile. I placed gaps just below but gaps move too.

Is there anything we can implement to stop up/down movement of the content just below autotyping lines.

thanks

1 Like
#8

Hello There,

This jigging action is because of the height of the text type. It becomes zero when there is no text to type. To resolve this, we need to set a minimum height for the typing text. Please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.el119.x-text .x-text-typing, 
.el123.x-text .x-text-typing, 
.el127.x-text .x-text-typing, 
.el131.x-text .x-text-typing {
    min-height: 16px;
}

Hope this helps. Please let us know how it goes.

#9

worked well
thanks guys

Today I noticed that other pages that use front page as template (header/footer and some elements) has jiggling, Only Home page is ok others not.

Hi,

Please follow the provided links or any other non Home pages reduce the screen size to say tab or iphone size and notice the issue. the home page is fixed by your code but other pages not.

two frames. basically when screen changed size to tab or iphone the only page where provided code works is the home page. there is no jiggling. other paged I show in secure good reference to the problem. pls reduce the screen and proceed to check. We need a global code that applied to this element regardless which page we applied this ad design.

#10

We are delighted to assist you with this.

Cheers :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#12

Hi there,

Please kindly consider that the jiggling effect you are talking about is because of the no height while a typewriter effect has no letter. That can be solved by adding a minimum height to the container which has the effect.

So whenever you add the typewriter effect go to the inline Style option of that element and add for example min-height: 30px, play with the number to be able to find the correct height for each case.

Please kindly open up a separate thread if you have problems and give us detailed information with screenshots to follow up.

Try to keep each question separated in different threads so we can focus on each issue individually.

Thank you for your understanding.

#13

Hey There,

Could you please provide a screenshot of what you are experiencing so that we will have an idea of what is the other issue about?

Thanks.