AlwaysQuestioning AlwaysQuestioning - 2 years ago 142
Javascript Question

How can I use the "typing effect" CSS animation here in conjunction with Bootstrap's responsiveness?

There is a nice typing animation I would like to use on my personal website:

However, when I try to put it inside a

in bootstrap, I notice that it does not respond to the window resizing (e.g. making the window smaller makes it fall offscreen) that normal text would.

Is there a way I can have this text respond to the window size, and all the other nice properties of bootstrap?

EDIT: The CSS is exactly the same as the link about, except I changed it from applying to all
to a class called

<div id="main" class="container-fluid text-center push-center">
<div style="background:transparent !important" class="jumbotron">
<h1>Welcome to my site</h1>
<p class="typing"> <i class="fa fa-globe" aria-hidden="true"></i>
I am from America </p>
<p class="typing"> <i class="fa fa-briefcase" aria-hidden="true"></i>
I love to work. </p>
<p class="typing">
Contact me! <span>|</span>



Answer Source

You can do this by specifying font-size in viewport units, as seen here:
Scaling font size with screen size?

This applies to all kinds of text.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download