Live view is not displaying the same as the editor

https://all-out-education.squarespace.com/
Password: all-outeducation123

Hi all, 

I have added in some code to have a typewriter effect on the homepage. When in the editor it looks great but when I test it in incognito a very large space appears between the static type and the typewriter effect (I don't want this space).

Any ideas on what the issue is? 

-------

Code I used : 
<div class="container">
  <h5>
<span class="txt-type" data-wait="3000" data-words='["strengths", "confidence", "passion", "self-awareness", "growth mindset", "academic skills", "curiosity", "voice", "leadership skills", "personal brand", "career plan", "resilience", "values", "own narrative"]'></span>
  </h5>
</div>
<style>
/* CSS RESET */

/* ALIGN CONTENT */
.container {
  display: flex;
  /* Remove horizontal 'justify-content' center if you want the base text not to move */
  align-items: left;
}

/* ADD CURSOR */
.txt-type > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

/* ANIMATION */
@keyframes blink {
  0% {
    border-right: 0.08rem solid rgba(255, 255, 255, 1);
  }
  100% {
    border-right: 0.08rem solid rgba(255, 255, 255, 0.2);
  }
}
  #page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}
</style>
<script>
class TypeWriter {
  constructor(txtElement, words, wait = 3000) {
    this.txtElement = txtElement;
    this.words = words;
    this.txt = "";
    this.wordIndex = 0;
    this.wait = parseInt(wait, 10);
    this.type();
    this.isDeleting = false;
  }

  type() {
    // Current index of word
    const current = this.wordIndex % this.words.length;
    // Get full text of current word
    const fullTxt = this.words[current];

    // Check if deleting
    if (this.isDeleting) {
      // Remove characters
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    } else {
      // Add charaters
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

    // Insert txt into element
    this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

    // Initial Type Speed
    let typeSpeed = 50;

    if (this.isDeleting) {
      // Increase speed by half when deleting
      typeSpeed /= 2;
    }

    // If word is complete
    if (!this.isDeleting && this.txt === fullTxt) {
      // Make pause at end
      typeSpeed = this.wait;
      // Set delete to true
      this.isDeleting = true;
    } else if (this.isDeleting && this.txt === "") {
      this.isDeleting = false;
      // Move to next word
      this.wordIndex++;
      // Pause before start typing
      typeSpeed = 500;
    }

    setTimeout(() => this.type(), typeSpeed);
  }
}

// Init On DOM Load
document.addEventListener("DOMContentLoaded", init);

// Init App
function init() {
  const txtElement = document.querySelector(".txt-type");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  // Init TypeWriter
  new TypeWriter(txtElement, words, wait);
}

</script>

Thank you! That worked. It is not a custom font. I have used CSS to change h5 to a new font available on squarespace (see code below). The font doesn't seem to work on mobile....any ideas as to why?

h5 {
  font-family: beloved script;
  font-size:90px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

On 8/17/2023 at 11:26 AM, PamCheney said:

Thank you! That worked. It is not a custom font. I have used CSS to change h5 to a new font available on squarespace (see code below). The font doesn't seem to work on mobile....any ideas as to why?

h5 {
  font-family: beloved script;
  font-size:90px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}

Try this instead

h5 {
  font-size:90px;
    margin-block-start: 0em;
    margin-block-end: 0em;
}
h5, h5 * {
font-family: beloved script !important;
}

Thanks for this! I ended up adding the font styling directly in the code block and it works great now.