Jump to content

Keep text from moving next to animated text

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://agicreative.com/info/team

Site Password: password

I have some animated copy in the banner area on my site and I want to control that the text around it doesn't move with the animated text animates. Essentially, you see "Driven By" move every time the animated text moves to accommodate the spacing. I am hoping that I can make the animated text stay left aligned to keep the "Driven By" static.

Here is the code I am using for the animated text:

<section class="sp-intro">
    <h1 class="sp-headline slide">
      <span>We're a team of image makers, <pbr>driven by <span>
        <span class="sp-words-wrapper">
            <b class="is-visible">creativity.</b>
				<b>Coffee.</b>
				<b>Family.</b>
				<b>Music.</b>
				<b>Tacos.</b>
				<b>Video Games.</b>
				<b>Adventure.</b>
<b>Art.</b>
<b>Science.</b>
<b>Beer.</b>
<b>Nature.</b>
<b>Travel.</b>
<b>Lighting.</b>
<b>Laughter.</b>
<b>Puppies.</b>
<b>Relationships.</b>
<b>Collaboration.</b>
<b>Whiskey.</b>
<b>Technology.</b>
<b>Design.</b>

        </span>
    </h1>
</section>

 

Link to comment
  • Solution

Try editing your code

<span>We're a team of image makers, <pbr>driven by <span>

to

<span>We're a team of image makers, <pbr><span style="display:block;">driven by</span> <span>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
24 minutes ago, tuanphan said:

Try editing your code


<span>We're a team of image makers, <pbr>driven by <span>

to


<span>We're a team of image makers, <pbr><span style="display:block;">driven by</span> <span>

 

Thank you for this, but unfortunately is just moved the animated text below the other text.

Link to comment

The problem is due to the width limit.
The solution here is to move drive by to new row, or increase the width of the entire block of text.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.