Ninja Kit Typewriter effect

Site URL: https://bulldog-oriole-mnxr.squarespace.com

Hi! @IXStudio

Im fairly new to Squarespace and was trying to create a typewriter effect to a text on my site but wasnt quite able to get it running. Tho Im not quite sure why it doesnt work, I wondered if it needs a higher tier subscribtion? I currently have the cheapest one.

I have tried every way I can think of, and now Im stuck.

Site password: coco

Thanks!

Hi dear @ConeCake
Thanks for choosing Ninja Kit!
Please add me as admin collaborator to fix it for you!

IXStudio[dot]net[at]gmail[dot]com

Thank you!
Best,
Leopold

16 hours ago, IXStudio said:

Hi dear @ConeCake
Thanks for choosing Ninja Kit!
Please add me as admin collaborator to fix it for you!

IXStudio[dot]net[at]gmail[dot]com

Thank you!
Best,
Leopold

Thanks but I got it working already, thanks to @bangank36!

Hi, I've just installed the Ninja Kit Typewriter effect but the font is different from what I want. Is there any chance I can change it to match my site style?

1 hour ago, SapphireMuse said:

Hi, I've just installed the Ninja Kit Typewriter effect but the font is different from what I want. Is there any chance I can change it to match my site style?

What is your site url

It's https://impala-kale-c5yz.squarespace.com/

PW: kinokohomes

9 hours ago, SapphireMuse said:

It's https://impala-kale-c5yz.squarespace.com/

PW: kinokohomes

Hi,
Use this code in Design -> Custom CSS

div#ninja-elements.ix-block-ninja-custom-typewriter span {
    font-family: 'Poppins' !important;
}

Please use the like button if it helps you!

Best,
Leopold

It worked! Thank you!

Thanks

@IXStudio hi! I just installed Ninja Kit typewriter on the homepage of my site but I can't seem to get the animation to work. Are you able to help?

https://hineighbourtest.squarespace.com/
password: hineighbour

Thanks!

@IXStudio Hi Leopold - love the ninja kit.  One question.  Despite the Mobile font size being set to 30px - both the static and typing text are much smaller on mobile.  Is there a fix?

On 9/6/2022 at 8:50 PM, kmdesign said:

Hi Leopold - love the ninja kit.  One question.  Despite the Mobile font size being set to 30px - both the static and typing text are much smaller on mobile.  Is there a fix?

Can you share link to page where you have problem? I think we can give code to adjust size

@tuanphan@IXStudio

Hi, I am facing the same issue with the much smaller font on mobile.
Here's the link to the site: https://career-atlas.squarespace.com
password: 1234ca
A fix would be much appreciated. Thank you!

5 hours ago, tuanphan said:

Can you share link to page where you have problem? I think we can give code to adjust size

Hey there! @tuanphan Thanks again!!  Link to the page below. The type is in hero gallery image, the problem is with the size of the font in mobile only - it says it's set to 30px - but looks more like 16 to me.  Maybe it's auto-resizing?  

https://www.bvrconsulting.com/

16 hours ago, kmdesign said:

Hey there! @tuanphan Thanks again!!  Link to the page below. The type is in hero gallery image, the problem is with the size of the font in mobile only - it says it's set to 30px - but looks more like 16 to me.  Maybe it's auto-resizing?  

https://www.bvrconsulting.com/

 

Add to Design > Custom CSS

/* Ninja Typewriter on mobile */
@media screen and (max-width:767px) {
div#ninja-elements * {
    font-size: 30px !important;
}
}

7 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Ninja Typewriter on mobile */
@media screen and (max-width:767px) {
div#ninja-elements * {
    font-size: 30px !important;
}
}

 

Works like a charm - was also able to adjust line-height!

You are the best!  Thank you so much!! 

Hi dear @brinkmedia
Thanks for choosing Ninja Kit Typewriter!

Could you edit the element again and set the two options of font size and copy the code into your website?



Thank you!
Best,
Leopold

Hi @IXStudio, Thank you so much for your help with the font situation.
I have one more question about the typewriter effect, how can I hide the cursor after the effect is over? 

Thanks!

**EDIT: I figured it out. My Section ID was incorrect. Everything is good.

This is what I've got but the Custom CSS doesn't seem to be over-riding the HTML on the page. https://bit.ly/407Y9vv and the animation is still too small when in portrait mode. When in landscape the sizing is different and more like the desktop version.

This is the HTML

<div id="ninja-elements" class="ix-block-ninja-custom-typewriter"><div class="wrap"><div class="type-wrap" style="--ixTypeWriterFontSizeMobile: undefinedpx;"><span id="ixspeed"></span><div id="typed-strings" style="display: none;"><span>Professional</span><p>Reliable</p><p>Flexible</p></div><span id="before_typed" style=""></span><span id="typed" data-speed="150" data-backdelay="1500" data-loop="true" data-loopcount="1" data-fontsize="100px" data-weight="bold" data-writingtextfontweight="bold" data-writingtextfontsize="58" style="white-space: pre; font-size: 58px; font-weight: bold;"></span><span id="after_typed" style=""></span></div></div></div>

This is my Custom CSS

@media only screen and (max-width: 767px) { 
    div#ninja-elements.ix-block-ninja-custom-typewriter span#typed {
      font-size: 8vw !important;
      line-height: normal !important; 

I want to adjust to 66vw because I want the animation to extend over 2/3 of the portrait screen and I would like a 2.5 line-height because it is either too close or too far away from the other text and I want to see if that will solve my design issue.

Tips?