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.

@tuanphan I use my website everyday to run my website I can't leave code up that breaks my websites function for multiple days at a time. Is the fix doable? Kindest regards.

Now my social links are fine but I can't scroll my pages. This Code: <style> .lightbox-caption { color: grey; font-weight: bold; margin: 15px 0; text-align: center; display: none; position: absolute; bottom: -65px; z-index: 9999; } .gallery-lightbox-wrapper:hover { cursor: pointer; } .gallery-lightbox-item[data-in='false'] .lightbox-caption { display: none!important; } .gallery-lightbox-item[data-active='true']:hover .lightbox-caption{ display: inline-block; } .gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{ display: inline-block; } .gallery-lightbox .lightbox-caption { display: block !important; } </style>

I put the code back up. Waiting for another one of your amazing code solutions 😄

Hey the code in the footer from before broke my social links on my website except for tiktok, is there another version of the code that I could try? Kindly, Ricardo.

I followed instructions added it to my header and footer didn't work, left it there for you to correct. Url: https://ricardomusicstudio.com/

I've tried all code posted here they all add captions to my Lightbox but you can still see the captions in my masonry grid. How do I remove the captions from that grid? I've left the code in the footer and changed the color to grey. My website url is: https://ricardomusicstudio.com/filmography

Tried adding it to the footer didn't work so I removed it as I wouldn't be able to do it without help. This is my url: https://ricardomusicstudio.com How do I get that loading animation with the percent counting up on my website?

Same question for my website - which CSS can I preload to make my website mobile score higher in google lighthouse? https://ricardomusic.studio I've already reduced requests down compressed images, tried to reduce cumulative layout shenanigans what else in terms of code and preloading can I do to score higher on mobile ? Any help you could give would honestly mean the world to me.

Tried adding this to my website and it didn't work: https://ricardomusic.studio

I have labelled my files on my website page with alt text in the file name put a description and turned on add captions and google lighthouse is still saying that I don't have alt attributes for my thumbnails on my page? https://ricardomusic.studio/filmography