Search the Community

Site URL: https://rabbit-primrose-wsww.squarespace.com/ I've looked at the built in style options and don't see the ability to set color overlay opacity for slides within the Banner Slideshow. Is that correct? And if that isn't a built in option, any thoughts on adding such via CSS? Thanks!

Site URL: https://www.agentrx.co/ Hello! Trying to make the card on this slideshow banner just below the heading to be 30% transparent. Thank you, Bridget

Site URL: https://www.glencairnfurniture.co.uk/ Hi, My testimonial slider doesn't show arrows on desktop but does show on mobile? I have the following code under 'custom CSS'. Can you please help? .has-site-title .Header-branding {font-family: 'GASALT THIN'; letter-spacing: 1.5px;} //BlockQuoteFontColour// blockquote { color: #bc9f6a; font-family: futura-PT; letter-spacing: 0em; font-weight: 300; } .quote-block .source { color: #bc9f6a; padding: 16px 20px; font-style: italic; font-family: futura-PT; } //CaptionOverlay// .image-caption-wrapper { opacity: 0; text-align: center !important; top: 0 !important; position: relative; pointer-events: none !important; } &:hover, &:focus { opacity: 1; } .image-caption { left: 50%; position: absolute; top: 50%; width: 100%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .image-caption p { font-family: futura-pt; font-size: 18px !important; font-weight: 400 !important; color: #bc9f6a !important; line-height: 120% !important; letter-spacing: 1px !important; opacity: 1 !important; } .sqs-block.sqs-block-editable:not(.sqs-block-editing) .sqs-dd-invalid-handle { cursor: default; pointer-events: all !important; } .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay .intrinsic .image-caption-wrapper .sqs-block-image .image-block-outer-wrapper.layout-caption-overlay-hover .intrinsic .image-caption-wrapper { background: rgb(88,120,53) !important; opacity: .1 !important; } .image-caption-wrapper { max-height: 100% !important; } //fullbleedslideshow// #slideshow { min-height: 100%; width: 100vw !important; height: auto; position: fixed; top: 0; left: 0; } /* Prevent Hyphenation */ p, h1, h2, h3 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } @media screen and (max-width:640px) { body.homepage article.Index-gallery-item * { font-size: 12px; } } section#testimonialslider { min-height: unset !important; height: 200px; }

Hi, I have a portfolio slide show gallery which is cropping the images within it. Is there any custom CSS I can insert to remove the cropping? any ideas if it is possible to get rid of it?!

Hey guys, I am trying to change the arrows on my slideshow; they are currently "-->" arrows, and I would like to have these arrows: "<" and ">". I would like to keep the small box / button on which the arrows are. Does anyone have an idea how to achieve that? Highly appreciate help on this 🙂

Site URL: https://www.hortus.com.au/about-5 Hello When in mobile the logo which has been overlayed using the below css is cropped. How do I get it so you can see the whole logo on mobile devices. Password: hortus Thanks Current css: [data-section-id="62b2b5e018398148f72b3fa9"]:after { content: " "; position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; background: url(https://static1.squarespace.com/static/604008e3f6c0190bbe9903bd/t/62b3f315b15ed050327cec58/1655960341821/Picture1.png); background-repeat: no-repeat; background-position: 50% 50%; }

Site URL: https://www.hortus.com.au/about-5 Hi there Is there a way to zoom out the slide show so that all of the image is visible? At the moment squarespace is cropping the image so it is very zoomed in. Thanks

Site URL: https://www.upcyclepianocraft.com/ Hi there, I've added a slide show of hero shots to my home page and I'd like to get them to advance automatically but there's no setting for that. I'm kinda surprised! Is there a way to do this in 7.1?

Site URL: https://www.eddysummers.com.au/documentary-weddings I have a Slideshow: Full for my 7.1 site, on desktop its working fine, but on mobile it crops the width severely. I'm looking for a way to keep the width for this gallery on mobile. Is this possible? Cheers.

Hello, I'm using the Adirondack template and I have a slideshow for images on a page. I like the idea of having a caption appear when I hover over the image, and have that option checked in the "Design" tab of Edit. The problem I have is I would like the text to be center aligned in the overlay (on hover). Currently, it's left justified. Note: I do see the dropdown in the "Design" tab that allows me to move the overlay (on hover) to a part of the image. Ex: center, bottom left, bottom right, etc. But that just moves the overlay's placement on the image. I'm looking to move the text within the overlay itself. Furthermore, I don't see any place to adjust the text's font, color, size, etc. of the overlay. Does anyone know have any code or steps that can be inserted to allow me to make these adjustments? Thanks so much. Cheers.

Site URL: https://sabinelemke.squarespace.com/ Hi, I've found a similar request here, but the suggested code didn't work on my site... I would like to change the style of the control arrows in a gallery and make them look the same as the control buttons in the banner slide show. pw: Lemke Thanks in advance Katja

Hi, I added the image gallery (Slideshow:Full) and added pictures. I chose bullets as gallery controls and they are placed below the picture. Depending on the size of the browser, the section below overlaps with the gallery. With that, the lower part of the image is hidden and I don't want that. And the controls disappear, which is contra-productive. I've already used section[data-section-id="627d705257b5ff1a4b9e77a0"] { min-height: 120vh!important; display: block !important; position: relative !important; object-fit: contain!important; } That helps so that the image doesn't get cropped on the top. I just need something for the bottom now. I hope, anyone can help. Kind regards, Justine

Site URL: https://lostsouls-dotuu-dev-1.squarespace.com/config/pages Trying to get the header banner slideshow to auto rotate every 3 seconds as well as be controlled by the arrows – is there any custom CSS that can do this?

Site URL: https://apricot-oarfish-s26l.squarespace.com/ Hey Squarespace experts, I have a banner slideshow on my homepage that I am trying to add two custom features: 1) autoplay after a set duration and 2) make each slide have a clickthrough target. site: https://apricot-oarfish-s26l.squarespace.com/ pass: da1234 I understand that the banner slideshow has an option to display a button, but my goal is for minimal UI elements, so if the entire image was a clickable target, that would be great! Thanks in advance!

Site URL: https://www.olivetealarts.com I'm using squarespace 7.1 I have two separate sections on this homepage for the slideshow banner. One is strictly for the desktop version and the other is strictly for the mobile version. On the mobile version, I would like to bring the slideshow control buttons higher so there is less wasted space between the buttons and the artwork. This is only for the mobile display of my website, the desktop display is fine. Thank you

Site URL: https://www.the-consultancycollective.com/ Hello! So I have a gallery slideshow for client logos but I wondered if it might be possible to show 2 gallery images at one time? I did have a scrolling gallery reel (as per the desktop version) but the logos were too small in this instance.

HI there, Had a quick question, I'm working on a website and have a full screen slideshow on my home page. Due to some the darker photos, my navigation gets lost in the photo. My previous site on a Squarespace 7.0 template faded the entire screen except for the header when hovering in the header. Is this possible in 7.1? Thanks!

Hello! Is there a way that I can remove the arrows from an autoscrolling Gallery: Slideshow: Simple setup (SS 7.1)?

Site URL: https://www.hudsonriverphotographer.com How can I get my slideshow to resize for mobile? Thank you!!

Site URL: https://bison-gar-84by.squarespace.com/config/design Is there a way to use both controls (arrows and bullets) for a gallery slideshow? The site hasn't been published. Let me know if you need the password to assist. Thanks!

Hi guys, I am trying to create a Homepage / Landing page on my website and I could use a bit of help. I am trying to reach this result https://www.ghostplugins.com/products/super-slideshow-gallery-autoplay-version?peachs_apc=christy-price, however, I am using version 7.0 of Squarespace. I have created an Index with a Gallery set to Slideshow that became fullscreen following this tutorial https://christyprice.com/blog/full-bleed-slideshow I have only managed to hide the footer and header with this code in the Index Page > Settings > Advanced <style>.Header, .Footer, .Mobile-bar{display:none !important; } </style> But I would like to bring back the Logo of my site, without bringing back all the header and adding a text and a button to each slide. I must let you know that I have custom code for the header that is slanted, so when I tried to use .Header-nav in the code above, it brought back the logo with the header background colour and some bug flashing the "slanted part" when the slide changes from one to another. I will attach some screenshots just to be more clear since this landing page is not online at the moment. "Slideshow Fullscreen" "Slideshow with the .Header-nav in the code" "How the Slanted Header Looks on the rest of the website" Any help would be highly appreciated, considering I have tried many techniques in tutorials, but with no good result. Thanks!

Site URL: https://www.myontrackrealty.com/home-in-dallas-texas-testing Hey guys, on this page right here, on mobile, it shows the slideshow at the bottom (testimonial slideshow) but the text won't show all the way and then strangely moves around on the following slides. I have this in CSS custom. In fact, I have this for the whole page for the desktop version of the slideshow and the mobile. Any help on the mobile part getting fixed please? /* slider with text overlay */ .sqs-block-gallery .sqs-gallery-block-slideshow { max-height: 500px !important; .sqs-gallery-design-stacked-slide { max-height: 500px !important; overflow: hidden; img { transition: Slide 300ms !important; } } .meta { background-color: transparent; max-width: 100% !important; transition: Slide 700ms !important; -webkit-transition: Slide 700ms !important; -moz-transition: Slide 700ms !important; -ms-transition: Slide 700ms !important; } .meta-title { text-align: center; font-size: 20px; text-transform: uppercase; letter-spacing: 2px; padding: 6px 20px; color: #042663; } .meta-description p { text-align: center; color: #ffffff; font-size: 22px; letter-spacing: 1px; padding-top: 4px; max-width: 550px; } .meta-description a:link { color: #9DB0D8; text-align: center !important; } .sqs-gallery-design-stacked-slide:hover { img { -webkit-filter: blur(3px); filter: blur(3px); } } } @media screen and (max-width:480px) { /* Show description */ .sqs-gallery-block-slideshow .meta { display: block !important; } /* Font size */ .sqs-gallery-block-slideshow .meta * { font-size: 8px !important; } }

Hey, really struggling to figure out how to make page content full width on supply template, specifically the slideshow block. As you can see on the image there is padding on the left and right of the slideshow, that’s what I am trying to remove completely. I’m currently using custom css on this page to remove header, footer, mobile.bar; change background; and to add buttons on images… so that I can repurpose this as a landing page while keeping the format of supply theme on the rest of my site…. Any suggestions on either making the slideshow specifically full width / no padding or remove padding from this entire page? Below is the CSS currently used: <style> #header, #footer, #mobile.bar { display: none !important;} </style> <style> #main { margin-left: 0; height: auto; } </style> <style> #main {background-color: #E4D5A0; width: 100% !important;} body {background-color: #E4D5A0;} #canvas {background-color: #E4D5A0;} </style>

Site URL: https://raccoon-tarantula-6j7y.squarespace.com/ Hi, I want to create a border around my slideshow gallery on mobile. Instead of it being full width, I would like to add an inset spacing, like the red square I draw on the attachement. pass: giuseppe

Site URL: https://teal-oboe-kfw9.squarespace.com/ Hi there Hope that all is well. Is it possible to replace the left and right arrows on the gallery slideshow with black dots underneath? Site https://teal-oboe-kfw9.squarespace.com Login: tyst1234 Thanks in advance! Alastair