RicardoRMS

Yes still no H1 headings seen by seobility: https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2F&crawltype=1 URL: https://ricardomusicstudio.com I tried everything to adjust it and still no H1 read. @tuanphan

@creedon it displays the text and messes up the code. @tuanphan any solution?

@creedon tried breaks the effect but I appreciate the help truly. 🥰

Can anyone help with this? @tuanphan

@tuanphan is there any to resolve the missing H1 heading issue? Link to website all pages have this issue: https://ricardomusicstudio.com Seobility link again: https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2Ffilmography&crawltype=1

https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2Ffilmography&crawltype=1

@tuanphan yes on mobile the captions are a little too low to properly read. And the photos in the Lightbox all load individually which grinds loading the site to a halt. So yes its still an issue. Site and specific page url where the issue occurs: https://ricardomusicstudio.com/filmography

@tuanphan id like the effect you posted. And I am wondering if those colours can be changed in the code. site URL: https://ricardomusicstudio.com

@tuanphan When I test my website with seobility it says I no longer have an H1 title. Because I inserted this code does it not count as an H1 title ? Can that be fixed with code? Or do I specifically need to put a H1 title text and the code underneath? kindly, website URL: https://ricardomusicstudio.com

@tuanphan my website is: https://ricardomusicstudio.com It works but its not centered and it moves my homepage image. I'd like the typewriter H1 titled to not move any other elements. Just for it to type my H1 and then restart like its doing. I'll also be copying and pasting this code for each H1 of every page but I assume your code solution will work for all. I used this Code: <div class="typewriter"> <h1> <span class="txt-type" data-wait="3000" data-words='["Composer.", "Producer.", "Sound Designer."]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .typewriter { display: flex; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; 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); } } </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>

@tuanphan last question I promise! On mobile the formatting of the captions is weird its a bit too low how do I adjust it just for mobile ? And now that I ran google page speed insites - how do I get the whole Lightbox to load at the same time. Apparently it loads each photo individually totally 34.3 seconds on mobile which is awful. Kindest regards.

@tuanphan after fixing the code it broke my seo for H1 headings on every page. I won’t use this code for now. Thank you for your time, you do amazing work.

Thank you I'll do that for next time. I fixed the code now the loading animation runs on the bottom left of my page. I was wondering two things, is there a way I can centre it on the bottom? And is there a way to make it disappear after reaching 100% loaded.

Fixed - you are a miracle worker! 😗 You probably don't get enough gratitude for the amazing work you do but thank you so much.

@tuanphan Still kindly waiting on a solution - this code and other ones affect the function of my website and I need to know if its fixable. Kindest regards.