Search the Community

Site URL: https://digitalvenue.squarespace.com/ Hi! I have a very simple SS 7.1 landing page that should fit on one view on every browser without the need for scrolling, but somehow there are some pixels that won't allow this, and a very short (and bothering) scroll is still there. I have removed the header via css... Any pointers on how to make this cover 100% of the browser view eliminating the scrolling? Thanks!

Site URL: https://testlanding.squarespace.com Hi All Need some help with some code for adding Horizontal scroll bar to a summary block (see Mocked-up image) I'm currently using 7.0 Brine and have already tweaked the code to style the Left and Right arrows... My client really wants a Horizontal scroll bar as the carousel is quite long (29 images) and wants to show the user some sort of progression. https://testlanding.squarespace.com The Summary block is right at the top 'Land data at your fingertips' There seems to be a lot of unanswered questions around this topic any help would be massively appreciated.😇

Site URL: https://www.crowmartialarts.com.au/contact Hey Guys, I'm a bit stuck with this one so I thought I'd share it with you guys to see if anyone's come across it before or has any suggestions. Basically at the bottom of our "Contact" page we're using an iFrame to display a Google Slide onto our website (to display our timetable). When viewing this page on iOS if a user scrolls down to look at the timetable it essentially traps them on the timetable. Regardless of which direction the user swipes the page doesn't scroll. Obviously this can be counter by zooming or scrolling at the top or bottom of the phone that is not displaying the timetable but that isn't a very user friendly solution. Any ideas on how I could resolve this?

Site URL: https://www.davidpauljones.com/about Is there a code to make accordion description content scrollable once the item is open? I have seen this in other sites and very useful. My site password is: manifest22

Site URL: https://swan-arugula-5f75.squarespace.com/ Website pswrd: 12345678 When I scroll down my page, the top menu bar disappears which is perfect. However, when I scroll up and stop in the middle of the page, the top menu bar appears which overlays on top of my content. I want to see my logo and menu bar only when I reach the top of the page. Any idea how to solve this issue in Carson template? Thanks!

Site URL: https://charlnesslifeislikeabullet.com/ My website mobile version have overflow problem, I used the code "html, body {overflow-x:hidden;}" to hide horizontal space, but after applying this code my website cannot scroll up or down smoothly, it will stuck at the same point and bounce back. RPReplay_Final1638842571.mov

Site URL: https://www.iamcatterina.com Hi All, WEBSITE: iamcatterina.com PASSWORD: catterina I'm building my client's website and have had a couple troubleshooting issues: When loading the page, there's a "jump" glitch. Where the website loads small and jumps to the actual website size. It only occurs when first loading the page. Or clicking the navigation logo. Here's a screen recording to show the issue. Another issue is the scrolling feature. I've added anchor jump points to the navigation. However, I noticed that it's not working on Safari/mobile. My client really wants this feature to be streamlined on all platforms, so please let me know if there's a work around this. I've tried solving the issue by checking the coding I've added. But I noticed that even when I remove all of the coding, the loading glitch still occurs. Any help would be WONDERFUL! I've attached the coding additions as well if that helps at all:

Site URL: http://www.emphirium.com Can anyone link me/help me to find a code on how to unfreeze the right side of the Product Description (the excerpts and product details) to start scrolling with the images/page? I would like to achieve the following: the stacked images to be on the left while the excerpt up top to scroll with the page, and not be fixed. Something like when you go to junglepresets.com products. Any ideas? Password: 20212021

Site URL: https://www.tgtfresh.com/ I'm hoping to sort of delaying the scroll back header from hiding when I'm scrolling down to only start to hide after I scroll past the first section or two, so there wouldn't be a blank area most of the time when the page isn't completely scrolled to the top. Secondly, since I'm hiding the logo with instructions from https://schwartz-edmisten.com/blog/shrink-logo-on-scroll-in-squarespace-71 on mobile, and modified to transform instantly, the logo makes the page jump a bit every time I scroll to top - I'm thinking that delaying the scroll back to somewhere lower than the top of the screen might make this process off screen and reduce its impacts. Also, is there a way to disable the code for shrinking the logo when I'm in the overlay navigation menu?

Site URL: https://www.downtoearthadventures.com/ Hi, I'm trying to get the scrolling marquee text to scroll continuously, without a pause and on one line. Any advice? https://www.downtoearthadventures.com/ pw: downtoshirts Examples: https://gawoonchung.com/about https://fourtwocreative.com/ Thank you!

Hi Community - I've been trying to figure out how to make the scrollbar for an inline image caption on hover to appear on hover instead of only appearing upon hover + scrolling over the text. I want to have the scrollbar visible on hover so the viewer knows there is more content to scroll through. As it is currently, the viewer would only know there is scrollable content if they happen to scroll while hovering over the image caption. I'm using Squarespace 7.1. Any help would be really appreciated! Thanks

Site URL: http://www.saltycopy.com Hello, I am struggling to figure out how to edit my header. I want a transparent, fixed header (with white text) when at the top of a page on my site. I would like to change the color of the fixed header to an aqua (#c7faeb) with black text when I scroll. I've been playing with various CSS codes for this but haven't figured it out yet. I am using Squarespace 7.1 and any help would be very much appreciated!

Hello everyone I have a scrollbox that I've implemented, but I want to change the design of the scrollbar. This is the CSS code as of now: //scrollbox .scrollBox { height: 520px; width: 100%; border: 2px solid rgba(60,219,192,.2); overflow: auto; margin-right: 0%; margin-left: 0%; padding: 20px; font-size: 15px; } I've tried to implement parts of the code linked here, but with no success... I want a similar result as the example through the link had. Could anyone help me?

hello, how can i make my navigation bar scrolling? when im scrolling my website these menu on top disapears and i want it to follow through scrolling

Site URL: https://plasticarcade.com Hello so I setup my page to use mostly one page design with links in header to navigate to anchor links on the main page. Problem is when I goto my blog section for instance the links don't work anymore... so if I fix it by using full links like this; https://plascticarcade.com/#about instead of just "#about", it works on external pages but it breaks the links and scrolling effect on the home page. Is there a way to fix this? thanks and any help is appreciated

Site URL: https://www.artsarasota.org/workshops-classes/p/visiting-artist-workshop-6bfpw-2a4m7 Please help - if you try to purchase a workshop or class, the form to fill out will not scroll. (the link goes to one of 80 classes but it doesn't work on any of them). Support said they disabled scripts in the preview mode and it worked. They said that the problem was likely caused by custom code. I removed the code/scripts (google translate and Tockify calendar) and I still can't get it to scroll like they did. I have tried various browsers, PC, Mac, etc. Why can't I scroll when I disable scripts like they did? I am following directions, deleted the external scripts, and disabled scripts on preview mode. People can't purchase their product right now and I am getting a bleeding ulcer. Thank you anyone!!!

Hi, I am looking at making a website that scrolls horizontally. A very simple site with title and menu in the top left hand corner. There would be a few galleries which I would like to scroll horizontally containing different sizes of images. I have already started something but the galleries only allow you to click through. Any help would be much appreciated .

Site URL: https://www.arnaldoabba.com/ How does one go about making a page scroll horizontally instead of vertically - like this page: https://www.arnaldoabba.com/ I have tried modifying the ishimoto template myself, but just cant seem to get it to work. Are there and CSS gurus out there that can help me with an explanation? Any help is much appreciated. - Jakob

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>

Through css? Like some images I want to scroll horizontally on web.

Site URL: https://www.stantonroad.wirral.sch.uk/ Hi! I am wondering if it is possible to add a link to my scrolling text in my announcement bar? Currently, I have a link present on the announcement bar. However, it only works when you click on the announcement bar box, rather than the text which may cause confusion. The text also seems to stop when a mouse hovers over it and doesn't link to anything.

Site URL: https://www.sparrowtheapp.com/ @tuanphan @bangank36 You guys are my idols. As the title suggests, I want the announcement bar to stay as I scroll down on my phone / laptop. I have the following bit of CSS but can't seem to make it work. Thoughts? #page section { min-height: 0 !Important; height: auto !important; padding-bottom: 0vw !important; } .sqs-announcement-bar-dropzone { position: -webkit-sticky; position: sticky; top: 0; z-index: 10001; } .show-on-scroll-wrapper.show { display: none; } /* remove announcement bar on mobile when mobile navigation is active */ @media only screen and (max-width: 640px) {.tweak-mobile-overlay-slide-origin-left.is-mobile-overlay-active .sqs-announcement-bar{ display: none; } }

Site URL: https://rural-fuels.squarespace.com/heating-oil https://rural-fuels.squarespace.com/heating-oil Password: RF We want the section "We Deliver A Renewable Fuel..." and icons to be fixed on scrolling to under the navigation, is this possible?

Site URL: https://womendo.com/ Hi, Does anyone know how to make this scrolling banner span the full width of the page? website is: womendo.com Thanks!

Site URL: https://www.sucoca.com/about @tuanphan @bangank36 @creedon I am having a side scrolling issue - i think it is to do with a marquee messing the overflow up? Could someone please see if they know what is making this happen? www.sucoca.com/about pw:chocolate https://share.getcloudapp.com/7KuAZ0jd