Headline text typing module - pushes down content

[website2fix]

Hi there!

So im creating an page and im using an headline with the ‘Typing’ module, (where it autotypes and backspaces the words)

It all works fine on big screens, but as soon as i have mobile devices, i notice it keeps pushing the content up and down as the words appear…

How can i prevent the typing module to push the content down? (like give it static spot without moving the content…

Because my CTA button moves up and down at the end of the page… that doesn’t look nice.

Hope you understand what im trying to explain.

Thanks in advance great support!!

Jay.

[rad]

Hi @creativeG,

Thanks for posting in.

Would you mind providing the exact URL where the typing headline is? I couldn’t find it on your site. Maybe the solution is the minimum height so in case the text content changes, it will remain the same.

Cheers!

[website2fix]

Hi @Rad, That doesnt fix the problem…

The site is currently unavailable for public…

Any other solutions? ive put it on a staging site ( for you to see what i mean) Hope to get a solution to it soon, i think its something simple but i might missed it…

Thanks!

[ruenel]

Hello There,

Because there isn’t enough space for the text to display, it pushes to the next line. I would suggest that you reduce the font size in smaller screens by utilizing the responsive text feature. You must apply responsive text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:
https://community.theme.co/kb/shortcode-walkthrough-responsive-text/
http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Or you can simply edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 767px){
    .x-text-content-text-primary .x-text-typing {
        font-size: 20px;
    }    
}

Hope this helps.

[website2fix]

Hi thanks for the reply!

I think that might be the case, putting some classes in the responsive text… I have looked at the kb section and stuff…

But could you perhaps provide me some already made settings that I could take over for the responsivenes texts so i can use them as a base for my layout?
Like now im figuring out what are the right settings such as , compressions, minum - max size, to be be perfect. can’t seem to find the right trigger… Because in the modules itsels it also has a Base font (em) and down below there is Font sizes aswell… makes it all confusing

Hope you can help me out with this little thing too

[basanta]

Hi There,

Thanks for writing in!

You can add the calculated font size instead of a responsive class so that it will take size according to the container and minimum size.

Example:

calc(2.25vw + 12px)

This will keep the text minimum 12Px and maximum according to the container size.

Please try to change the value as per your convenience.

Let us know if that helps!
Thanks