Typewriter effect not working on mobile. Using Bootstrap 4

Question

I am a beginner coder that primarily stays inside Bootstrap 4 and CSS. I am now venturing into JS and I have created a bug / monster I can't seem to fix.

I wanted to add the typewriter effect to my homepage. I got it to work on my laptop and I was pumped to push it to github and every thing was looking great, until I tried to show my wife on her iphone, and it did not work (Face Palm).

I cant seem to pinpoint why it is not working on mobile devices. I have tried a few checks like, pingdom to see if the site was too large for a phone to load, but that did not seem to be the case.

If anyone can take a look I would greatly appreciate

 var TxtType = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2000; this.txt = ''; this.tick(); this.isDeleting = false; }; TxtType.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>'; var that = this; var delta = 200 - Math.random() * 100; if (this.isDeleting) { delta /= 2; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta); }; window.onload = function() { var elements = document.getElementsByClassName('typewrite'); for (var i = 0; i < elements.length; i++) { var toRotate = elements[i].getAttribute('data-type'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtType(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}"; document.body.appendChild(css); };

 body { font-family: 'Roboto', sans-serif; } .navbar { font-size: 18px; } .navdrop { padding-top: 1em; } .navbar-nav>li { padding-left: 20px; padding-right: 20px; } .back1 { background-image: url(./assets/images/back1.png); background-size: cover; padding-bottom: 0%; } .back2 { background-image: url(./assets/images/back2.png); background-size: cover; } .hero { min-height: 100%; /* Fallback for browsers do NOT support vh unit */ min-height: 100vh; /* These two lines are counted as one :-) */ padding-right: 1em; padding-left: 1em; display: flex; align-items: center; } .heroText, .heroButton, .heroSubText { padding-top: .4em; } .howItWorks { padding-bottom: 3%; } #textColor { color: #102D47; } .heroIcon { color: #102D47; padding-top: 5em; vertical-align: middle; } .heroText { font-size: 50px; font-weight: 900; color: #102D47; } #heroText { font-size: 50px; font-weight: 900; color: #102D47; } .heroButton { background-color: #102D47; color: white; } .heroSubText { padding-top: 1em; padding-bottom: .5em; font-size: 25px; color: #102D47; } .howItWorks { background-image: url(./assets/images/debut_light.png); padding-right: 10%; padding-left: 10%; } .bottomhero { color: #102D47; } .heroFeatures { font-weight: 200; font-size: 20px; color: #102D47; } .subjectHeadRight, .subjectHeadLeft { padding-top: 1.9em; font-size: 35px; font-weight: 900; color: #102D47; } .subjectHeadFooter { font-size: 25px; color: white; } .footerText { color: white; } .subjectHeadContact { padding-top: 1%; font-size: 25px; color: #102D47; } .videoSection { padding-top: 2em; padding-bottom: 2em; } .page-footer { background-color: #102D47; } /* Sign Up Form */ .leadSignUp { background: url(./assets/images/leadBackground.png) } /* Learn More Section */ .mainArea { background-color: #20812d; } .signUpBox { background-color: white; margin-top: 3%; margin-bottom: 3%; padding-bottom: 8%; } .signUpHead { font-size: 30px; font-weight: 800; padding-top: 4%; } .signUpSub { font-size: 20px; font-weight: 400; margin-top: -4%; } .teamPic { width: 40%; margin-left: 30%; } .peopleImg { border-radius: 40px; border: lightgray solid 1px; } @media only screen and (max-width: 767px) { .subjectHeadRight, .subjectHeadLeft, .howContentLeft, .howContentRight { text-align: center; } .howImg { padding-top: 0px; padding-bottom: 0px; } .subjectHeadRight, .subjectHeadLeft { padding-top: 0px; font-size: 22px; } .howContentLeft, .howContentRight { padding-left: 2%; padding-right: 2%; } .signup-box { padding-left: 10%; padding-right: 10%; } } @media only screen and (min-width: 1000px) { .heroText { font-size: 72px; } } .signup-box { padding-top: 3em; padding-bottom: 3em; background-image: url(./assets/images/leadBackground.png); background-size: cover; } .data-box { border: rgb(178, 178, 178) 2px solid; background-color: rgba(122, 122, 122, 0.388); padding-top: 1em; padding-bottom: 1em; width: 100%; } .plumbTest { padding-top: 2em; } .plumbHead { font-weight: 900; } .signUp { font-size: 25px; font-weight: 900; } .textInfo { padding-left: 3em; padding-right: 3em; } .data-box { border-radius: 13px; } .submit { background-color: #102D47; width: 40%; border: lightsteelblue 3px solid; } * { color: #102D47; text-decoration: none; }

 <div class="container-flex hero back1 text-center" id="heroSpace"> <div class="row"> <div class="col-md-6 col-12"> <h1 class="heroText">Better marketing for <p id="" class="typewrite" data-period="2000" data-type='[ "plumbers!", "electricians!", "landscapers!", "carpenters!", "painters!", "roofers!", "solar contractors!" ]'> <span class="wrap"></span> </p> </h1> <h2 class="heroSubText"> Website Design, Lead Generation, Phone Handling! </h2> <div class="dropdown text-center heroDrop"> <a class="btn dropdown-toggle heroButton" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select Your Industry </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" id="textColor" href="./carpenter.html">Carpenters</a> <a class="dropdown-item" id="textColor" href="./electrical.html">Electrical</a> <a class="dropdown-item" id="textColor" href="./landscaping.html">Landscaping</a> <a class="dropdown-item" id="textColor" href="./painting.html">Painting</a> <a class="dropdown-item" id="textColor" href="plumbing.html">Plumbing</a> <a class="dropdown-item" id="textColor" href="./roofing.html">Roofing</a> <a class="dropdown-item" id="textColor" href="./solar.html">Solar</a> <a class="dropdown-item" id="textColor" href="./window-door.html"> Windows & Doors</a> </div> <p class='text-center heroLeads'>Get Free Leads!</p> </div> </div> <div class="col-md-6 col-12"> <img class="img-fluid peopleImg shadow-lg" src="./assets/images/plumber-1.jpeg" alt="people working"> </div> </div> </div>

it. I will put the code here and on codepen.

Thanks for any help!

CODEPEN: https://codepen.io/rob-connolly/pen/oNLamEd

Answer 1

User error, i made the image really large in the hero space. It caused the typewriter effect to load slow. I have reduced the img size from 5000px to 1000px, and it loads faster and now works.