Jump to content


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by holahannah

  1. 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
  2. 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! 🙂
  3. 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 🙂
  4. Thank you so much! That's perfect, looks like it will sort out exactly what I'm aiming to do. Appreciate it!
  5. 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!
  6. Amazing! Thank you @tuanphan - appreciate that, it worked perfectly!
  7. 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!
  8. As far as I'm aware it's still happening - I haven't been able to resolve it on any of my sites.
  9. 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; }
  10. 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!
  11. 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.
  12. Amazing! Thanks so much @Lesum. I applied that code and it worked! For the mobile, it looks good now displaying in 3 columns, however do you know if there is a way for the columns to read left to right, not vertically. Eg, the dates should read (right to left) Fri 30 June, Sat 1 July, Sunday 2 July - rather than vertically as they currently are. Thank you!
  13. Ok, thought I was going crazy but seems others have experienced this issue. I've added anchor links (as per https://support.squarespace.com/hc/en-us/articles/207135178-Creating-anchor-links) and basically when someone click's "Book" at the top of my page, I want the anchor link to take them to a form section on another page. On first click, it seems to work, but it's not in the right position (goes to the green section above the form section) On second click (of the "Book" button) it lands perfectly where it should. I don't know why it's not working on the first click though!! Here's a screen video so you see what I mean: https://www.loom.com/share/6b53c08f689946dda8bbafaf42948c58?sid=6fb0eb9a-082c-45cc-9c4e-007c3fae3d34 https://houseofbubbles.squarespace.com/ password: bubbles Any ideas?
  14. Hello, I've having a bit of a spacing issue. https://houseofbubbles.squarespace.com/the-bubbles-bar/ password: bubbles In the 'Upcoming Events' section, I've added code blocks to represent each date and location of an event. Using a Classic Editor Section. When i preview the site in the Squarespace editor there is no extra space. However when I preview the page in a browser, there is a lot of extra space under each code block - how can I remove this? Also, on mobile, how can I get 3 code blocks to display per row, rather than stacked full width on top of each other? Have attached screenshots for reference. Thank you
  15. Thank you @tuanphan, If I use a bigger size icon, the icon appears large, do you know what CSS I can use to contain the size? Yes, for the newsletter block, I'm not sure if this CSS is ideal, but I used this to remove the space between the field and button: #block-ddd853fc87bd5be49c0b { padding-bottom: 0; .newsletter-form-body { padding-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .form-fields, .newsletter-form-button-wrapper { margin: 0 !important; } .field { padding: 0; width: 100%; } .submit-wrapper { padding: 0; } }
  16. Hi there, I'm trying to add a custom SVG icon to display after some buttons (the orange 'View The Menu' buttons). I think I've added the correct code: section[data-section-id="64feb0001002d11ad7391587"] { .sqs-button-element--tertiary:after{ content: url(https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff574cc22531152b025dda/1694455628420/icon-sm.png)!important; display: inline-block; } .sqs-button-element--tertiary:hover:after{ content: url('https://static1.squarespace.com/static/64f6a3717594110372c72cba/t/64ff588a811d8b601288ba9c/1694455946747/arrow-icon-hover.svg')!important; } } When i add the svg icons after the button, they don't display? I added in a png icon, so you can see where it's supposed to go, but it's super blurry. And the svg icon on hover doesn't show at all. Any ideas if it's possible to fix this? https://houseofbubbles.squarespace.com/the-bubbles-bar password: bubbles On the same site (in the footer), I'm also trying to remove the space between the newsletter sign up field, and the button. Does anyone have a little code snippet for this? Thank you!
  17. Hi all, I've just been notified by a client that their portfolio on their website is no longer working on Desktop (though works on mobile). This site was built probably 2 years ago on 7.0, and seldom gets updated with content, so I'm wondering if an update to the platform has broken my custom code. Originally it was a blog post summary block and I used custom code to stagger the image thumbnail layout (like the attached). But I think the platform is now updated to be a section - so I guess this has affected the custom code. Is my only option here to rebuilt the section? I suppose there's no way to revert to how it was? https://www.kristymcgregor.com.au/portfolio
  18. Hello, I've added a summary carousel block to my page here: https://railwayhotelgosford.com.au/whatson However, I'm looking for a way to add more padding between each summary item. If I just add CSS margin to the .summary-item, it adds space between the summary items, which is what i want, but the third one gets cut off. I want 3 items to display per carousel scroll. Is there also any code I can add in, to ensure the gold 'book now' button are always vertically aligned - no matter how much content is in the summary excerpt? Thanks
  19. Thank you @tuanphan - added that code, and it looks much better. Thanks!
  20. Hey @nataliefaye, Gorgeous site! I think the layout doesn't look too complicated, but the way they have overlapped the content blocks makes it look really interesting! A handy way to find out if a site is built with Squarespace is using the Squarespace ID Finder Chrome extention: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff - install it, then click it when you're on a site - if it's Squarespace, all the ID blocks will show. I think there is a way using Custom CSS to change the ratio of videos that you've added to the site using the Squarespace video block. I found this tutorial which explains how to change the video block ratio. Could be helpful in achieving what you want to do: https://insidethesquare.co/squarespace-tutorials/video-block-size
  21. Hello, I'm trying to add custom icons for a Summary Carousel block and a Slideshow Gallery block on my site: https://orange-cone-8mgh.squarespace.com/ password: orderxpress I seem to have figured out how to change them to a custom image icon, and also applied a different custom image icon for the hover effect. However, the image over effect makes the button smaller overall - I'm guessing because the hover image is a larger size, to include a 3d shadow. What CSS do I need to add here to make sure that on hover effect, the button image is slightly larger, so the button doesn't look like it's getting smaller? Here's the code I'm using: .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { background: url('https://static1.squarespace.com/static/64e3d440c78e8d669c139b60/t/64e592ae4100912ad6c6fc61/1692766894561/btn-next.png'); background-size: contain; background-repeat: no-repeat; background-position: right; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:hover:before { background: url('https://static1.squarespace.com/static/64e3d440c78e8d669c139b60/t/64e59440b946601f10ea0281/1692767297007/btn-next-hover.png'); background-size: contain; background-repeat: no-repeat; background-position: right; } Also attached a screenshot of the normal / hover image. On another note - is it possible to add carousel indicators (those little dots) below a Summary Carousel and a Gallery Slideshow? Many thanks in advance!
  22. Hello, I'm looking to customise a form block to match a design. Basically there are lot of default Squarespace elements in the form block I want to hide, to just create something simple. You can see a WIP of the form here: https://orange-cone-8mgh.squarespace.com/ password: orderxpress (the last section). Attached is the design I'm trying to achieve. So looking for guidance to do the following: Can the "First Name", "Last Name" text sit within the box, or is there a way to add placeholder text here? How can I chance the placeholder text to a custom font style How can I remove the space so that the form fields sit closer together? Lastly, does anyone know if it's possible to add a 3D shadow style effect to each field when selected (screenshot also attached for reference of design). Any guidance greatly appreciated! I'd even be happy to use a custom form plugin if anyone knows of one available. Thanks
  23. Amazing! That worked. Thanks so much for taking the time to write out that code - will definitely help me in the future now I understand what blocks to target. Many thanks
  24. Hi all, Does anyone know how I can add a style to active page links in my website footer? https://dragonfly-star-7hgp.squarespace.com/ password: sunshine I just have normal text links in the footer that are for each page. Is there a way i can bold the text link depending on what page you're on? Eg, if I'm on the About page, the About link in the footer would appear bold? Thank you
  • 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.