gracemoore

Hey @digitalink, yes managed to sort it! After aaaages trying to find a solution on Squarespace forum I came across this post which expressed the same problem. @Ziggy shared the below solution which worked for me... Try adding this to your Custom CSS, hoping it will hide the embed warning message and should allow you to shrink the block so you don't have to leave it overlapping the text block: html.squarespace-damask .sqs-blockStatus { display: none !important; } Hope it works for you too!

I have embedded a ConvertKit Form via a code block (Fluid Engine), however there appears to be a large area of extra space below the code block that I cannot get rid of (see attached screenshot). I have tried CSS to no avail and cannot drag the area/rows up any further than it currently is. Any ideas how I can remove this extra space below the embedded form? Link to page: https://www.gracemooreyoga.com/mentorship Any help is much appreciated 🙂

Yes - I fixed it, thankyou!

Site URL: https://www.gracemooreyoga.com/new-home Page Password: ADMIN I am using code (see below) to add the scroll down arrow as displayed in the image, however on mobile devices the code is not quite centred. How can I get the arrow to be displayed exactly in the centre of the page on mobile? The code I am using is: <div class="scroll-down"></div> <style> .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 20px; height: 20px; border-bottom: 1px solid white; border-right: 1px solid white; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 2s ease-in-out infinite; -moz-animation: fade_move_down 2s ease-in-out infinite; animation: fade_move_down 2s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } </style> Any help would be greatly appreciated! TIA 😊

Amazing! Thank you so much 😀

Site URL: https://www.nicolacoulson.com/dream-big-baby-masterclass I'm using code to add the countdown timer displayed on this page. As you can see in the images, on desktop it is all displayed on one single line. However, on mobile the countdown splits across two lines. I am struggling to figure out how I can edit or amend the code to make the font smaller on mobile devices so that it is displayed on a single line. Any solutions or ideas? Here's the code that I'm using... <style> #countDownTimer{ color:#fff; display:inline-block; text-align:center; font-size:2rem} #countDownTimer .text{ font-weight: bold; display:inline-block; color:#fff; font-size:5rem; margin-bottom: -60px!important } #countDownTimer>div{ background:#BD5396; display:inline-block} #countDownTimer div>span{ margin-top:-40px!important; padding:30px; display:inline-block } </style> <script> // Set the date we're counting down to let countDownDate = new Date("february 28, 2022 23:59:59").getTime();// Update the count down every 1 second let x = setInterval(function() {// Get today's date and time let now = new Date().getTime();// Find the distance between now and the count down date let countDifference = countDownDate - now; let days = Math.floor(countDifference / (1000 * 60 * 60 * 24)); let hours = Math.floor((countDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); let minutes = Math.floor((countDifference % (1000 * 60 * 60)) / (1000 * 60)); let seconds = Math.floor((countDifference % (1000 * 60)) / 1000); document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>" + days + "</span><div>Days</div></div><div><span class='text'>" + hours + "</span><div>Hours</div></div><div><span class='text'>" + minutes + "</span><div >Minutes</div></div><div><span class='text'>" + seconds + "</span><div>Seconds</div></div>"; if (countDifference < 0) { clearInterval(x); document.getElementById("countDownTimer").innerHTML = "<div><span class='text'>EXPIRED</span></div>"; } }, 1000); </script> TIA!

Thank you SO much for this! I have been trying so hard to figure out why this code was no longer working :-)