Search the Community

I've been trying updating some content in the website for the last 3 days and the editor keeps crashing on me all the time. This is painful. Does anyone else have this same issue and have find a workaround? I'm using Chrome and MacOS.

I'm trying to integrate this horizontal scroll into my website. Tried adding the html, css encased in <style> and adding all the necessary script. However it didn't seem to work. Anybody able to shed some light on this ? https://codepen.io/cameronknight/pen/qBNvrRQ <div class="container"> <section data-bgcolor="#bcb8ad" data-textcolor="#032f35"> <div> <h1 data-scroll data-scroll-speed="1"><span>Horizontal</span> <span>scroll</span> <span>section</span></h1> <p data-scroll data-scroll-speed="2" data-scroll-delay="0.2">with GSAP ScrollTrigger & Locomotive Scroll</p> </div> </section> <section id="sectionPin"> <div class="pin-wrap"> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h2> <img src="https://images.pexels.com/photos/5207262/pexels-photo-5207262.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3371358/pexels-photo-3371358.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> <img src="https://images.pexels.com/photos/3618545/pexels-photo-3618545.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=900" alt=""> </div> </section> <section data-bgcolor="#e3857a" data-textcolor="#f1dba7"><img src="https://images.pexels.com/photos/4791474/pexels-photo-4791474.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""> <h2 data-scroll data-scroll-speed="1" class="credit"><a href="https://thisisadvantage.com" target="_blank">Made by Advantage</a></h2> </section> </div> <style> :root { --text-color: #111; --bg-color: #b9b3a9; } section:not(#sectionPin) { min-height: 100vh; width: 100%; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 2rem; padding: 50px 10vw; margin: auto; place-items: center; } img { height: 80vh; width: auto; object-fit: cover; } h1 { font-size: 5rem; line-height: 1; font-weight: 800; margin-bottom: 1rem; position: absolute; top: 10vw; left: 10vw; z-index: 4; overflow-wrap: break-word; hyphens: auto; } @media (max-width: 768px) { h1 { font-size: 16vw; } } h1 span { display: block; } h2 { font-size: 2rem; max-width: 400px; } .credit { font-family: Termina, sans-serif; } .credit a { color: var(--text-color); } * { box-sizing: border-box; } #sectionPin { height: 100vh; overflow: hidden; display: flex; left: 0; background: var(--text-color); color: var(--bg-color); } .pin-wrap { height: 100vh; display: flex; justify-content: flex-start; align-items: center; padding: 50px 10vw; } .pin-wrap > * { min-width: 60vw; padding: 0 5vw; } p { position: absolute; bottom: 10vw; right: 10vw; width: 200px; line-height: 1.5; } </style> <script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); const pageContainer = document.querySelector(".container"); /* SMOOTH SCROLL */ const scroller = new LocomotiveScroll({ el: pageContainer, smooth: true }); scroller.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(pageContainer, { scrollTop(value) { return arguments.length ? scroller.scrollTo(value, 0, 0) : scroller.scroll.instance.scroll.y; }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight }; }, pinType: pageContainer.style.transform ? "transform" : "fixed" }); //////////////////////////////////// //////////////////////////////////// window.addEventListener("load", function () { let pinBoxes = document.querySelectorAll(".pin-wrap > *"); let pinWrap = document.querySelector(".pin-wrap"); let pinWrapWidth = pinWrap.offsetWidth; let horizontalScrollLength = pinWrapWidth - window.innerWidth; // Pinning and horizontal scrolling gsap.to(".pin-wrap", { scrollTrigger: { scroller: pageContainer, //locomotive-scroll scrub: true, trigger: "#sectionPin", pin: true, // anticipatePin: 1, start: "top top", end: pinWrapWidth }, x: -horizontalScrollLength, ease: "none" }); ScrollTrigger.addEventListener("refresh", () => scroller.update()); //locomotive-scroll ScrollTrigger.refresh(); }); </script>

Site URL: https://serendipity-new.squarespace.com Hi everyone. I think this is a pretty common problem based on my research - but I can't find it solved anywhere. Basically, when I enter svg icons via html to a section, they look good in the editor. BUT they stack to one side when I save. Is there any way to get them to display correctly? https://serendipity-new.squarespace.com Password: serendipity I will attach screenshots below. Any help would be greatly appreciated.

Client is utilizing a 3rd party quoting tool and provided me with integration code. Tool has script to include on each page. That works fine. I was then provided the following code to actually open the quote tool, which is in a modal layer. However I'm utilizing buttons for my calls to action and not links (especially not unstyled links). Is there any way to include this in a button form? I tried copying the button code to make my own button but when I add this new class then nothing happens on click. What am I missing here? Thanks for any input! https://brookstitle.squarespace.com/get-a-quote# password BTE Creating a Link to the Quoting Tool Once the embed code has been added to your website, you can create a link that will open the quoting tool by adding the class "get-qualia-quote" to an html element on your site. <a href="#" class="get-qualia-quote">Click Me!</a>

hi everyone.. working on a fundraising site for covid-19 relief.. trying to embed a contribution form via code block but the height is limited, forcing one to scroll to see full form... I also tried putting the code into a squarespace embed block. I tried putting entire embed code i was give, including script, into a squarespace code block. I tried putting entire embed code i was given, including script, into a squarespace embed block. I tried injecting script into site-wide head as well as page specific head. I identified block ID and tried CSS injection to change height of block. Nothing works. Anyway you can help? Thanks in advance!

Site URL: https://pte.squarespace.com/ Hello, I've got quite an ambitious task as a beginner in CSS, HTML, & Javascript. I would love to implement this Radial codepen design in a 3 x 2 grid to showcase all of the different software that my team uses. https://codepen.io/CreativePunch/pen/lAHiu I've tried copying & pasting the codepen into a code block, but I couldn't get it to work. I've attached the design we are shooting for. The software logos do not need to be clickable. So, if you can help me implement the codepen six times in this grid, I think I'd be able to take it from there be replacing all the logos.

Site URL: https://octopus-glockenspiel-8yae.squarespace.com/ Site URL: https://octopus-glockenspiel-8yae.squarespace.com/ Hey folks - Huge thanks in advance to anyone who can steer me in the right direction here. I'm working on a site for a restaurant - they have code from their online ordering platform that opens a kind of like a lightbox-widget that allows users to order without leaving the page. I have the functionality working, but I'm trying to launch this via a navigation link. I think it's just syntax I'm having trouble with. Below is what I'm working with. That main script is in a code block in the footer, launches totally fine with that full button class in the body, but if I'm trying to get it to work in the navigation would it be a link with '#upserve-olo-opener' or...how do I fire that same action from the nav? code to order online: <script src='https://app.upserve.com/platform/olo-widget.js?kokeshi-restaurant-salem' type='text/javascript' id='upserve-olo-script'></script> button code: (provided by service) <button class='upserve-olo-button upserve-olo-opener'>Order Online</button> Site URL: https://octopus-glockenspiel-8yae.squarespace.com/ Password: thanksforthehelp Thanks!

Site URL: https://defendingabuse.com/our-team/shannon-smith Hey guys, I implemented some CSS drop shadows to photos and videos on my site. For some reason, on mobile only, there is additional space behind the photo that the shadow applies to and it looks bad. Check out the photos I attached, you can see the space above her picture. Again, this ONLY happens on mobile, desktop is fine. I am relatively new to html/css. I have adjusted margins and padding to no prevail. Any idea how to fix it? Thank you!

Site URL: https://orchid-flute-gfwg.squarespace.com/ Hi all, Can anyone help me with my coding? I'm pretty sure everything is correct, and it shows up fine on the mobile via Squarespace but on my phone, the custom fonts aren't showing up at all. I'm on an iPhone 8 Plus on Safari. Code // Custom Font // @font-face { font-family: Druk; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf); } @font-face { font-family: Euclid; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a016d2d2442e68e90958/1624743958321/EuclidCircularA-Regular.ttf); } @font-face { font-family: Oaklinn; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a0fa2b37c143c11961f9/1624744186366/Oaklinn.otf); } // Custom Fonts Implement // p {font-family: Euclid;} h1 {font-family: Druk;} h2 {font-family: Euclid;} h3 {font-family: Druk;} h4 {font-family: Oaklinn;} h5 {font-family: Euclid;} button {font-family: Druk; font-size: 10px !important;} .sqs-block-button-element {font-family: Druk; font-size: 10px !important;} h3.portfolio-title { font-family: Druk !important; color: white !important; font-size: 15px !important; } .mobile-bar-wrapper *, h1 { font-family: Druk !important; } Any help would be appreciated!

No matter how I rearrange my HTML, I am constantly blocked from viewing my page because there is a "Syntax Error on line 1" - there is NO syntax error on line 1. I have an entire block of code written out in a notepad file and it opens perfectly with web browsers. Below is a clip of it, from the beginning. How is <!DOCTYPE html> a syntax error? I have my opening and closing <head> and <body> tags way down below on the full document; again, this is just a clip. <!DOCTYPE html> <html> <head> <style> div.a {text-indent: 30px; } </style> <link href='https://fonts.googleapis.com/css?family=Rajdhani' rel='stylesheet'> <style> body { font-family: 'Rajdhani'; font-size: 16px; font-weight: bold; background-color: rgb(240,240,240) } </style>

Site URL: https://www.johanneswarnke.com/press I want an overlay of the vogue logo and white background to cover this gallery and then, on mouse hover, to disappear to reveal the image gallery - does anyone know how I would achieve this? best, liam

Site URL: https://www.nauti-bar.com/ I've injected the HTML code provided by Facebook to display comments on my page. I have data-width="100%", however the mobile version is not displaying the width at 100%. Does anyone know of a way to fix this problem? I've included my code below: <div class="fb-comments" data-href="https://www.nauti-bar.com" data-width="100%" data-numposts="5" data-order-by="reverse_time"></div>

This has got to be asked somewhere already, but I can't seem to find it. I'm written some web pages directly as *.html files. Is it possible to upload them as files, then add links to them on a Squarespage page, so that the link DISPLAYS IT AS A WEB PAGE? (Everything I do seems to treat the .HTML file as a file, and asks "do you want to download this file?" I don't want to download it, I want to display it in the user's browser)

Site URL: https://www.kubotec-nara.com/ PASS: KUBOKUBO Hi there, Thumbnails for my gallery slideshow doesn't show somehow only on mobile. What kind of Code should I get to? https://www.kubotec-nara.com/sekou

Site URL: https://grapefruit-piano-2kw3.squarespace.com/about-1 I want the tittle in the header at the left to be: Advanced Fitness School - Eric D Haun Online Personal Training How can I do this? Have tried some HTML and CSS but nothing has worked!

Site URL: https://grapefruit-piano-2kw3.squarespace.com/about-1 Hi, I want to remove the site title (Advanced Fitness school - Eric D Haun Online Personal Trainer from all the pages (except the home page) I can't seem to figure out which code is needed. Thanks! Site url: https://grapefruit-piano-2kw3.squarespace.com/about-1 Password: Run15upsq

Site URL: https://www.curtains2u.co.nz/curtains-new I have these image cards which look great on desktop and mobile, but they look terible on tablet view. Any thoughts how to fix this? <div class="sec-rev-data" style="background-color:#ffffff; color:black; padding:40px; border-style: solid; border-width: 1px; border-color:#dedede;"> <center><img src="https://static1.squarespace.com/static/5d1d5299ef1a470001944e7b/t/6192e994508e700542845f72/1637018006368/C2U_Block+Out.jpg" class="card-img-top" style="display:block;width:250px;height:250px;display:flex;"></center> <h3 style="color:black;">Block Out Curtains</h3> <p style="color:#A72A4B;font-size:0.8125rem;">Light control - Versatile - Bold </p> <p>For superior privacy, choose block out curtains. Beautiful and highly practical, block out curtains give you complete control over light levels and regulate room temperature. </p> </div>

Site URL: https://monroe-dems.squarespace.com When I add an image to a list item (which I have displayed as a carousel on the front page), I don't see a way to add a URL and make the image clickable. Am I missing something, or is there a workaround? I'm using the carousel view but I assume it would apply to the other views as well.

Site URL: http://www.bermanpictures.com I designed my photography website so that my email and phone contact links are from custom code. The code worked before, but I just discovered that now it doesn't. I would rather not use Squarespace's email link option through Pages-->Primary Navigation because the placement, color, and type size do not work in my design. So I added it to the Tagline of the Site Title. Pasting the code I am currently using below. Does anyone know if there's a way to alter this code so that the links will again work? The website is bermanpictures.com. You'll see I inserted multiple &nbsp;'s to make the spacing that looks right. <a href="mailto:mb@bermanpictures.com">email</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="tel:917-415-1766">+1&nbsp;917&nbsp;415&nbsp;1766</a> I think that's correct, but I am not at all knowledgeable about this stuff. Thanks for any help! Michel

Site URL: http://arrowleafhemp.com I have an odd issue, and have tried a half dozen codes provided by Circle Members on other relevant threads without success. When visiting my site on a mobile browser, there is a large empty space on the right side of the screen that runs the entire length of the page on every page. This space can't be seen when editing on the backend, but is apparent when you either zoom out or swipe to the right on a mobile platform. I've attached a screenshot from my phone. Any help would be greatly appreciated, Its been quite the headache working a solution.

Site URL: https://www.rikiyaklasen.com/ Hi! I am trying to create an intro splash page for my portfolio, but I'm having trouble using the localstorage tool when I'm injecting code in to the advanced settings within my homepage. Every time I click on the logo (which takes me back to the homepage), it not only plays the splash page again, but it plays it in inconsistent times of the source image/gif. This is currently the code I have specifically for the homepage: <div id="rk-loading-animation"> <div class="loading-graphic"> <video width="100%" height="100%" controls autoplay="autoplay" autoplay muted id="videoId"> <source src="https://static1.squarespace.com/static/5f9b148981c6990a90ea3a5b/t/6190cf055886f71414671c8c/1636880139746/Intro+Splash+lg+black.mp4" type="video/mp4"> </video> </div> </div> <script> var seenSplash = localStorage.seenScreen seenSplash ? showScreen() : console.log('Do not show screen') function hideAnimation(){ document.querySelector("#rk-loading-animation").classList.add("hide-animation"); } setTimeout(function(){ setTimeout(function(){ hideAnimation() }, 500); let checkLoad = setInterval(function(){ if (document.readyState === "complete"){ hideAnimation(); clearInterval(checkLoad) } }, 100); }, 1500); </script> Along with this for custom CSS: #rk-loading-animation{ position:fixed; z-index:9999; height:100vh; width:100vw; background:#000; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; animation-name:slideOut; animation-fill-mode:forwards; animation-duration:5s; animation-delay:7.5s; } video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-play-button, video::-webkit-media-controls-pausebutton { display: none!important; } @keyframes slideOut{ from{margin-left:0vw;} to{margin-left:-150vw} } Do any of you guys know how I can correctly implement localstorage to achieve having my splash page appear only on initial visit? I've looked for localstorage and splash page tutorials everywhere and none seem to help me at all. Also please keep in mind I'm still a beginner in javascript. Thanks!

Site URL: https://www.frillup.ch/cart As you all know that squarespace doesn't give option to check the box whether terms and conditions have been read before proceeding the checkout. I injected a code that showed a line," By continuing to checkout, you have read and agreed to our terms and condiotions" both on pc screen and phone. This was working perfectly fine until few days ago I applied a code on my home page for fetching the customer reviews from google- https://www.frillup.ch/. Now this terms and conditions line has disappeared from the shopping cart page. What can I do? The code that I applied was as follows: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { $('.CartFooter-checkout-28MW2').append('<div class="tuan"> By continuing to checkout, you have<br/>read and agreed to our <strong><a style="color: #7a6e65;" href="https://frillup.ch/terms-and-conditions" target="_blank" rel="noopener">Terms and Conditions</a></strong></div>'); }); </script> <style> .tuan { display: block; height: auto; text-align: left; color: #FFFFFF; background-color: transparent; font-size: 1.1rem; line-height: 1.5em; margin-top: -82px; margin-bottom: 300px; } </style>

Site URL: https://www.rnne231.com https://www.theweeknd.com Hello, I want to be able to add this animation to my site. However I dont know where to start. I have attached an example on the weekend's site and also a video to show the specific section of the animation. Please let me know if there is a way to add this to a Squarespace site. Untitled.mov

Site URL: https://cardioid-tarpon-f6jh.squarespace.com/config/?frameUrl=/ Hi, I am trying to embed a Website Toolbox forum on to my site using HTML code provided by Website Toolbox. However, the forum isn't displaying on SquareSpace - only the code is showing. Any ideas please? Thank you in advance. https://cardioid-tarpon-f6jh.squarespace.com/

Site URL: https://smilodon-tulip-mbea.squarespace.com/synopsis-1 Hi, I have background image I would like to run through the footer, however the footer appears as an opaque color. How can I make the footer transparent. I tried inserting this code into the pages advanced settings, but no cannoli. <head footer#footer { display: none; } } </head> And also the header toggles between opaque and transparent, I would like to make it exclusively transparent. Any and all replies much appreciated. thx