Jump to content

gracemoore

Circle Member
  • Posts

    19
  • Joined

  • Last visited

Everything posted by gracemoore

  1. 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!
  2. 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 ๐Ÿ™‚
  3. 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 ๐Ÿ˜Š
  4. 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!
  5. Site URL: http://www.gracemooreyoga.com What css can I use that will hide my Facebook icon from my navigation on mobile device (I only want Instagram to show here)? I have managed to hide it on desktop but it's still showing on mobile. TIA!
  6. Site URL: https://www.gracemooreyoga.com/ I am trying to hide the arrows either side of the carousel (as shown on the attached image) but only on desktop and tablet devices, I want them to remain on mobile devices. Is there a CSS snippet that I can use to do this? Link to the page: https://www.gracemooreyoga.com/ Many thanks in advance! Grace
  7. Thank you SO much for this! I have been trying so hard to figure out why this code was no longer working :-)
ร—
ร—
  • Create New...

Squarespace Webinars

Free online sessions where youโ€™ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.