Edit typing text code & edit blinking insertion point line

Site URL: https://www.amandachung.ca/

Hello!

Just wondering how I can change the blinking insertion point line to end where the text ends and not all the way on the far right of the frame. (I figured out how to center the text but I'm not sure how I can make the blinking bar end where the text ends.)

____________________________________________________

CODE (CODE BLOCK):

<div class="typeit">I’m Amanda!</div>

____________________________________________________

CODE (IN CUSTOM CSS):

.typeit {color:black; font-weight:bold; text-align:center; 
  overflow: hidden; 
  font-size:45px;

  border-right: 3px solid #000000;

  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #000000; }
}

____________________________________________________

Password to my site is: amanda

Thank you! 🙂

On 5/8/2022 at 1:29 PM, amchu said:

Site URL: https://www.amandachung.ca/

Hello!

Just wondering how I can change the blinking insertion point line to end where the text ends and not all the way on the far right of the frame. (I figured out how to center the text but I'm not sure how I can make the blinking bar end where the text ends.)

____________________________________________________

CODE (CODE BLOCK):

<div class="typeit">I’m Amanda!</div>

____________________________________________________

CODE (IN CUSTOM CSS):

.typeit {color:black; font-weight:bold; text-align:center; 
  overflow: hidden; 
  font-size:45px;

  border-right: 3px solid #000000;

  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #000000; }
}

____________________________________________________

Password to my site is: amanda

Thank you! 🙂

Can you take some screenshot of it?

On 5/9/2022 at 6:53 AM, bangank36 said:

Can you take some screenshot of it?

Yes! Please see the attached image and I've drawn an arrow at the blinking insertion point line.

I want the line to end where the text ends and not all the way to the far right of the page.

On 5/12/2022 at 5:11 AM, amchu said:

Yes! Please see the attached image and I've drawn an arrow at the blinking insertion point line.

 

I want the line to end where the text ends and not all the way to the far right of the page.

Add to Design > Custom CSS

/* Fix animation text */
.typeit {
    display: inline-block;
}
div#block-yui_3_17_2_1_1651990432053_5999 div {
    margin: 0 auto;
    text-align: center;
}

On 5/14/2022 at 8:00 PM, tuanphan said:

Add to Design > Custom CSS

/* Fix animation text */
.typeit {
    display: inline-block;
}
div#block-yui_3_17_2_1_1651990432053_5999 div {
    margin: 0 auto;
    text-align: center;
}

 

Thank you! This kind of fixed the problem, but now it would just type and blink all the way to the same edge, then glitch and appear right next to the text.

Wondering if there's any way to fix that?

Not sure if you're able to access/see it by inputting the password and taking a look at the "About" section to see the issue.