PamCheney

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

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; }

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!!

Hey there, I am working on a site and want the background to be a rotating carousel. I would like this carousel to maintain 100% height, but currently on smaller screen sizes it keeps it's proportions which creates an odd space below. (I am happy for images to crop when necessary) I have tied to work with the code but no success - if anyone has any ideas that would be great! https://maishabynisria.squarespace.com/

Thank you!

Site URL: https://www.miriamguttmann.com/still-life Hi there, I have created a website with Brine, and I am having issues with the galleries. They are cropping the bottom of all of my images. Is there some code I can add in to stop this from happening? i.e. look at this page: https://www.miriamguttmann.com/still-life Note the image with the yellow base - we should see the entire base + a little of the background.

Hey! Sorry for the late response! Ya that could be a great work around - how would I code this?

@tuanphan the link you send through does not work, but I mean here (see red arrows attached)

I am also having issues with this! The code that was provided was great for adding arrows to the specific product page but my client would also like it on the shop pages (this page for example: https://www.roastgreetings.com/birthday ) It is great for desktop with the hover mode but not ideal for mobile mode. Can anyone help with this? Thanks in advance!