holahannah

Thank you @tuanphan! That worked perfectly, and with a few CSS adjustments got it looking exactly how I want it. Thanks 🙂

Hello, I'm trying to create a gallery slideshow which has progress indicators (I'm not sure what to call them) over the image, which highlight, depending on which slide you're on. Video attached of the Figma prototype of what I'm trying to achieve. Any resource / plugin that would help me do this? I'm sure it's been done before, but perhaps I'm not searching the correct term. Site I'm working on: https://mcshane.squarespace.com/ password: bandit Thanks! Slideshow w_ progress indicators.mp4

Hi @tuanphan, I've had a developer help me get this effect using scripts: https://lumierecanberra.squarespace.com/ password: bandit And while it looks great on desktop (exactly the effect I want), on mobile it's really jumpy, and not really a smooth scroll. Do you know if anything can be done here to make it more of a smooth transition? Thank you Lumiere-Script-Animation.MP4

Hi @TMFL, Thanks for taking the time to reply, and your helpful explanation. Yeah, I will see if I can play around with the scroll bar, but I agree with you actually, might not be so bad to leave it as is, to indicate further images. Thanks

Hi @Beyondspace, Unfortunately not. While the images themselves have the rounded corners, because the last image in the slider goes beyond the slider margin, it has a straight edge - not rounded corners like I want. Attached is a screenshot of what I mean. Thanks

Hello, I'm having trouble custom styling a Stack Gallery in Squarespace. It's nearly how I want it, but I'm trying to get the border on the right side to be rounded, like the left side. Is this possible? Here's a link, and it's under the title 'Gallery'. https://beckrocchi.squarespace.com/wedding-galleries/ainsley-and-stu password: beckrocchi Any suggestions, appreciated! Many thanks

Thank you @tuanphan 🙂

Thank you @creedon - worked a treat!

Hi @tuanphan, Do you know if it's possible to make the radio button change colour (#ED1651) when it's selected? Like the screenshot attached. I'm not sure if it's possible. Also, is there a way to move the 'Feedback' radio button over to the left side a bit more? https://rocketrehab.squarespace.com/ password: rocket Many thanks

Does anyone know if there is a way to change the colour of the accordion item title when open. When the accordion item is open, I would like the title text to change colour to #ED1650, like the screenshot attached. Here's the site I'm working on: https://rocketrehab.squarespace.com/faq password: rocket Many thanks

Thank you! Worked perfectly.

Thank you @tuanphan that seemed to do the trick!

Hi, On my site I have a footer comprised of 3 sections. I am wanting to change the footer color of one section only, on one page only. Here's my site: https://rocketrehab.squarespace.com/faq password: rocket The map section I'd like to change the background color to #ED1650, however on this page only. I found code to do this, but it changes the color on all my background sections, where I only want to change it on the map section. Any ideas? Thanks in advance.

Hi @RuthLJ and @tuanphan, Did you manage to figure out how to do this? I'm trying to achieve the same thing on the website below (form in the footer): https://rocketrehab.squarespace.com/ password: rocket I'm trying to figure out how to make the radio buttons horizontal, as per the screenshot attached. Where you about to resolve this?

Hi everyone, I got this to work nicely using the tutorial @Ziggy suggested (thank you!). https://fyshwick-markets.squarespace.com/the-latest/flower-care-101 password: fg Does anyone know if it's possible to just make the title text block sticky as well? So the paragraph text basically scrolls behind the title? I also wanted to cap the height of the scrolling left column text - ideally i don't want the text to extend further than the image on the right, is there a way to hide overflow here? I've attached a screenshot for reference. Thanks

Hi @Ziggy, Thank you! That seems to do the trick, however the caption text also seems to have an opacity applied when you hover. Is there a way to only have the image with a 0.5 opacity, and the text no opacity at all? Appreciate it! 🙂

Hello, I'm trying to display captions on hover (on hover only) for a gallery wihth a Masonry layout. https://formedgardens.squarespace.com/projects password: fg I'm using the following code: section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry h4 { margin-bottom: 0; text-align: center; } //Overlay Style // section[data-section-id="6526275e7a97df2f9d881199"] .gallery-caption-grid-masonry { max-width: 100%; padding: 20px; pointer-events: none; position: absolute; bottom: 30%; width: 100%; } //Hover Mode // section[data-section-id="6526275e7a97df2f9d881199"] .gallery-masonry-item:hover { opacity: 0.5; } It's getting the caption where I want it, however, i DON'T want the caption to display unless you hover over the image thumbnail. Does anyone know what CSS I can use to achieve this? So the normal thumbnail state should just show the image, and then when you hover, you should be able to see the caption and the image should be faded out. Like the attached screenshot. Thank you 🙂

Thank you so much! That's perfect, looks like it will sort out exactly what I'm aiming to do. Appreciate it!

Hello, I'm trying to create a sticky block on a post page - does anyone know if it's possible? Here's a basic post page: https://fyshwick-markets.squarespace.com/the-latest/flower-care-101 password: fyshwick I'm wanting the image slider to stay sticky (fixed) while the content on the left moves as you scroll. Is there a way to achieve this? Ideally, I also want to be able to duplicate this 'post' for different posts, so I don't want to target the specific block ID if possible? Thanks!

Amazing! Thank you @tuanphan - appreciate that, it worked perfectly!

Hi @tuanphan, I'm trying to use the above code (on a different site) to make all the placeholder text black - but it's appearing a faded grey. Do you know how I change the colour of the placeholder text? https://saddlesmountwhite.squarespace.com/functions password: saddles Thank you!

As far as I'm aware it's still happening - I haven't been able to resolve it on any of my sites.

For anyone else needing help with a similar issue - I managed to fix this. It seems that I had set a font weight of 600 to my CSS styles: h1, h2, h3 { font-family: 'Manuka'; font-weight: 600; } I think that must have had some issues rendering in Safari and causing the font to look distorted (slightly bold and blurry). I just set the font weight as 'normal' and that seems to have done the trick! h1, h2, h3 { font-family: 'Manuka'; font-style: normal; font-weight: normal!important; }

Hi there, I'm using a custom font on my site, which seems to working properly on chrome/desktop and when I view on the Squarespace mobile preview. However when I look at the site on an iphone, the font is slightly different. It's the same font, but it looks blurry/slightly bolded. See screenshots attached for reference. Why would this be happening. On Safari Desktop it seems fine only in a few instances (ie the footer) it looks bolded and slightly blurry. Here's the custom font code I've used: @font-face { font-family: 'Manuka'; src: url(https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64f6ada57f53c9113ffac138/1693887909569/Manuka-bold.woff2); src: url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/6513b4863b07fe013352b03c/1695790214319/Manuka-Bold.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/6513b4934e3b6a119d6a09c9/1695790227338/Manuka-Bold.ttf') format('truetype'); /* Legacy iOS */ } Any ideas how I can get it look nice and crisp?! https://houseofbubbles.squarespace.com/ password: bubbles Thank you!

Thanks @tuanphan, that's the link URL I'm using: https://houseofbubbles.squarespace.com/the-bubbles-bar#book-now It's strange, because on the first click of "Book Now" it still scrolls to the section above. Then if I click the "Book Now" button again, it scrolls to the correct place. But I don't know why it won't scroll to the correct place on the first click of the button.