Search the Community

Site URL: https://www.pittsburghkidsfoundation.org/togetherforgood Hey all, I work on a small team at a nonprofit, so I am a website designer out of necessity, not by trade. I'm hoping this is an easy question. My org is doing an online event this year rather than our usual in person gala. We're encouraging people to buy "golden tickets" for a raffle we're doing. The golden ticket prizes are on the main landing page for this event, which is getting kind of long. I'm promoting the raffle on social media, and I would like to link to the golden ticket section of the page. I played around with anchor links using a code block just above the section with <div id="goldenticket"> </div>. But the anchor link only seemed to work on that page. Linking to the full https://www.pittsburghkidsfoundation.org/togetherforgood/#goldenticket takes me to the top of the Together For Good page. Is there any easy way to link to the "golden ticket" section of the page from a social media post? Again, not a web designer or coder by trade... Please be gentle. Thanks, Rodger

Site URL: https://www.futureparks.org/blogs hi folks, Had a complaint from a client that having multiple H1's in a single page is not good practice for accessibility - they're right and usually most organisations aren't too bothered.....until now. Legislation in UK is changing on 20th Sept where public organisations and public facing charities are mandated to reach WCAG AA and as much of AAA as does not place an 'ureasonable burden' on the organisation. So on the blog index page masonry /blog, each title on each blog card is an H1 - how can I change to H2? I've had a poke around Design-->Fonts--> Advanced etc but can't find anything specific - so I guess custom css to change a class? - <h1 class="blog-title"? I'm still learning the CSS for Squarespace and that's a bit beyond me at the moment and I have the client breathing down my neck! Any help would be gratefully received! Thanks, community 🙂

Trying to get a feel for the limitations for customizing templates with css/html. I am a bootstrap hobbiest intimately familiar with building creative, responsive websites with that framework. My takeaway from WordPress years ago you can mess with the css, but can't edit the html and the page structure, since that's what the pre-built template is all about. Is this the same with Squarespace, or is it even more limited in some way?

Hey. How to add an anchor link in markdown block? I have a code with sup tags and cant figure out whether it's possible to have a anchor link. <p><span style="color: #282828; letter-spacing: 0.02em; font-size: 26px; font-weight: 400;"> Write <sup style="font-size: 10px; line-height:0; vertical-align: 10px;">10</sup>

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!

Hi everyone! I wanted to change a few things from the videos with a custom htlm/css code. I want to remove the play arrow from the videos and I want to make these have autoplay and loop. I also have the specific html embed codes but I have no idea how to place these inside the HTML code. Any suggestions? I appreciate the replies and thanks in advance.

Hey!😄 I would like to add an 'i' button or use an 'i' image for a popover of a description. For example: Swedish Massage (insert 'i' button) *on click, having a popover description of "A light massage that enhances relaxation. These gentle movements are not intended to treat pain or injury."* Can anyone help me out?

Site URL: https://www.lulucheng.com/writing i added a markdown block so i could embed an email signup form for my Substack newsletter. this is the html code i received from Substack to do that: <iframe src="https://lulu.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe> however, when i paste this code into the markdown block editor, it left aligns the signup form (white box below the 'sign up' button): how do i center the signup form on the page? i'm using the sofia template. thanks for any help or insight! p.s. i removed the markdown block from https://www.lulucheng.com/writing for now, but the screenshot i've attached shows the issue i'm describing.

Site URL: http://www.pitchurethis.com Currently using Squarespace 7.1 and would like to upload my site logo as an svg. I know it can be done in 7.0 using certain templates but since the platform has changed, I can not seem to get any code to work to make this happen. Any one know a solution for this?

Site URL: https://www.crescentridgedairybar.com/products I have a div named .fixedelement with position: sticky; top: 0; on an index page Here is the code block code i'm using: <style> .fixedelement { position: sticky; top: 00px; width:100%; margin: 0px; background-color: white; padding: 5px; min-width: 300px; overflow: visible; position: -webkit-sticky; } </style> <div class="fixedelement"> <a href="#milk"><button style=" width: 23%;white-space: nowrap; font-size: 18px; font-family: arial;overflow: visible; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; appearance: none; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px; align: center;"> <b>Milk </b> </button></a> <a href="#icecream"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal;overflow: visible; padding: 10px; min-width: 100px;margin-bottom: 10px;"> <b>Ice Cream </b> </button></a> <a href="#beefandpork"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; overflow: visible; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;"> <b>Beef & Pork </b> </button></a> <a href="#Novelties"><button style="width: 23%;white-space: nowrap; font-size: 18px; font-family: arial; transition: opacity 0.1s linear 0s; border-radius: 300px; background-color: orange; display: inline-block; height: auto; border-width: 0px; text-align: center; text-decoration: none; cursor: pointer; line-height: normal; padding: 10px; margin-bottom: 10px; min-width: 100px;overflow: visible; "> <b>Novelties </b> </button></a> </div>

Site URL: https://www.worthdrivingfor.com/blog/2020/now-i-have-a-travel-category I'm doing a food and travel blog, and I want to add an AirBNB associate widget to my site to book the place I'm talking about. It shows up as "Script disabled" like normal when I'm editing, but when I'm done editing, it only displays as an empty box. I'm actually half decent at code (python in particular), but I don't know enough about HTML to spot any obvious problems. The code does work though, because I can run it in a code editor and get exactly the expected output. Other HTML code, such as Adsense and Amazon Ads displays fine. Here's the Ad code: <div><script src="https://www.airbnb.com/embeddable/airbnb_jssdk" async=""></script><div class="airbnb-embed-frame" data-view="a4p_collection_embeddable" data-id="99584"></div></div> Here's the page in question: https://www.worthdrivingfor.com/blog/2020/now-i-have-a-travel-category I'll attach an image of the code running properly in a code editor. Can anyone who's better at HTML tell me why this isn't working? The site is using SSL, but the link is https, so that shouldn't be an issue.

Site URL: https://www.studioqdesigns.ca/ Hi! I am using the Portfolio page layout for my website, and I have the entire site with a Medium width for each section. However, I can't seem to find the place to make the portfolio grid have the medium sized margins instead of large. Any help is appreciated! The image attached shows how the grid is a large width instead of medium.

Hello, I have a form on my landing page that takes an email address and then on submit it redirects to a different page with a more in depth form but still has an email field in case users get to the bigger form first. I wanted to know how to pass the email from the first form to the second one so that it is already filled in and users don't have to type it again?

Hello, I've looked into the backend of the website and found the existing code for the checkout button located on the cart page. I would like to add a similar button on our products page to view the cart under the add to cart button, hopefully to improve the user experience. (yessss i know the user could scroll up to the top and click on the cart) I have included screenshots that i though might be helpful one for an area i believe we could add the button. Thank you advance for any help! using squarespace 7.1 !

I am trying to set up a website with a banner image with some text and an code block on top of it that has HTML code that animates the text so it appears like it is being typed. I am able to add the text and code block to the intro section over the banner image in my Brine template and everything looks correct. When I navigate away from the page and return, the banner image is gone, and it appears as those it is completely covered by the code block. Is there any way to fix this problem so the banner image stays beyond when it is initially uploaded?

Hello! I'm working on a page where the main content is custom html + css + java. The code generates a magnifying glass search button that becomes a dropdown list (highlighted in green below). The script works in an external editor I've used to debug, but when I insert into Squarespace it's messing up the shopping cart in the header (red highlight). Is there a way to override these changes to the shopping cart in the header with something like: ".cart-button <some command> !important"? Or is there a bug in my code I'm not noticing? Code is also below. Any suggestions are welcome. Thanks in advance! Code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*animated search bar*/ .search { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background: #fff; box-shadow: 0 5px 20px rgba(0,0,0,0.5); border-radius: 4px; transition: width 0.5s; overflow: hidden; } .search.active { width: 400px; } .search input { position: absolute; top: 10px; left: 10px; width: calc(100%-90px); height: 60px; border: none; outline: none; font-family: arial; font-size: 36px; padding: 0 4px; color: #666; } .icon { position: absolute; width: 60px; height: 60px; top: 15px; right: 4px; background: white; cursor: pointer; transition: 0.5s; border-radius: 4px; } .search.active .icon { background: rgba(100,100,100,0.3); top: 10px; } .icon:before { content: ''; position: absolute; top: 10px; left: 10px; width: 24px; height: 24px; background: transparent; border: 2px solid #262626; border-radius: 50%; transition: 0.5s; } .search.active .icon:before { content: ''; position: absolute; top: 7px; left: 13px; width: 18px; height: 30px; background: transparent; border: none; border-right: 2px solid #fff; border-radius: 0; transition: 0.5s; transform: rotate(45deg); } .search.active .icon:after { content: ''; position: absolute; top: 20px; left: 13px; width: 18px; height: 30px; background: transparent; border: none; border-right: 2px solid #fff; border-radius: 0; transition: 0.5s; transform: rotate(-45deg); } .icon:after { content: ''; position: absolute; top: 25px; left: 35px; width: 18px; height: 18px; background: transparent; border-left: 2px solid #262626; border-radius: 0; transform: rotate(-45deg); transition: 0.5s; } /*dropdown*/ /*dropdown search bar*/ .dropbtn { background-color:transparent; border: none; color: white; text-color: white; position: absolute; top: 42%; left: 20.7%; margin: 24px; font-size: 36px; font-family:arial; cursor: pointer; height: 60px; } #myInput { box-sizing: border-box; background-image: url('searchicon.png'); background-repeat: no-repeat; font-size: 36px; font-family:arial; color: #666; padding: 19px; border: none; border-bottom: 1px solid #ddd; border-radius: 4px; } #myInput:focus {outline: 3px solid #ddd;} .dropdown { float:right; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 43.5%; left: 24.1%; background-color: #f6f6f6; min-width: 200px; overflow: scroll; height: 400px; width: 325px; border: 1px solid #ddd; border-radius: 4px; z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover {background-color: #ddd;} .show {display: block;} </style> </head> <body> <div class="search"> <div class="icon"></div> </div> <div> <div id="myDropdown" class="dropdown-content"> <input type="text" placeholder="Search..." id="myInput" onkeyup="filterFunction()" autocomplete="off"> <a href="allergy-research-group-products">Allergy Research Group</a> </div> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.icon').click(function(){ $('.search').toggleClass('active') document.getElementById("myDropdown").classList.toggle("show"); }) }); /* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); } function filterFunction() { var input, filter, ul, li, a, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); div = document.getElementById("myDropdown"); a = div.getElementsByTagName("a"); for (i = 0; i < a.length; i++) { txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { a.style.display = ""; } else { a.style.display = "none"; } } } </script> </body> </html>

Site URL: http://www.meetbrighid.com I'm wondering if anyone out there has managed to do a bit of custom coding that would allow the tag-cloud to pull from multiple sources? My website is a personal portfolio, and I'd like to be able to tag the different photos under each project, but then when you click, say, "branding" in the tag-cloud beneath the project, see a gallery of all projects that have the same "branding" tag, not just photos within that one project. Right now, when you use a tag-cloud block, it only lets you select one page/gallery/etc to pull tags from. I'd love it if there were a way to batch-select so that any tag is visible and could cross-link to portfolio pieces with the same tags. I've got some minimal CSS happening on the site, I'm not much of a coder but I know enough to adjust CSS and some very very basic HTML if I have something to jump off of. If anyone out there has suggestions for code injection / anything, please let me know! :)

Site URL: https://www.drmichaelogorman.com/ Hello, I'm looking for some help with a problem we have encountered with the Crosby template. On the home page of our website we want to change the top header image so that it is image left/copy right. I've attached an image of what we are looking for. On mobile the left block would stack on top of the headshot and the gold icon would disappear. Can anyone help with this? Thanks

Hey guys I am looking to build a form that users will have to fill out. Should the one field not match the input of my excel file then they will be prompted to try again. Something like "The information you have entered does not match our records." Example: 1. User is given a device with a MAC address 2. They have to register their device by filling out their personal information as well as the MAC address displayed on the box. 3. Two outcomes. If the MAC address matches my excel / google sheets file the registration is complete. If not then they are prompted to fill out the field again. Of course I understand I might need a third party service as well as html and css, but any guidance on achieving this system would be helpful.

Site URL: https://www.infinityhk.org/ Hi All, My website = https://www.infinityhk.org/, pw = abcd1234. It cannot show the sub-menu under secondary navigation but it works fine in my primary navigation. Anyone can give me a help? Happy to discuss Ryan

Site URL: http://www.batsevamakes.com How does one make buttons be side by side in Mobile view? I want them to be inline with each other so that they can act as "previous project" and "next project" buttons.

Site URL: https://www.lexiconhouse.com/about I'm hoping someone can help, as I've not been able to solve the issue. I copied in an HTML code into a code box at the bottom of this page to get an interactive map: https://www.lexiconhouse.com/about The problem is that it doesn't optimise on mobile, it looks too big. And actually it is a little smaller than the width of the page on desktop. Images attached. I've seen an AmCharts map on a Squarespace site that does optimise fine so I know it's possible to do it, but I'm at a loss how.. I'd appreciate any help!

Site URL: https://authorjustbae.com Hi guys and gals. I'm not proficient in code and need your help. On the front page, I've listed my books using the Gallery for display and clickable to an URL. What I want to do is create a new page and list the titles how they are on the front page but add buttons underneath each book cover that states "Available at all retailers" or similar. I've tried different scenarios using the product image page but it only gives me three at a time and the buttons are aligned to the left which is weird. There's no way to align them centered (Check my page section "Hot and Spicy Romance Novels..."). I prefer to have the gallery like on the front page but each book has a button underneath. I believe I'm on 7.1 but no sure. I surely need your help and thanks!

Hi I'm fairly new to Squarespace and have very basic coding skills. I'm setting up a website for my company and they proposed to have a form (preferably form block) inserted into the "Personalised Advice" menu in the markdown block. Is that possible? I'm using Wells as the theme. Would not be keen if we have to create a form HTML template... Any info/advice will be great, thank you 🙂

Site URL: http://ryansmulholland.com I'm trying to use HTML code to insert a Substack signup form on my homepage and in a few other places. When I add a code block, set up the code all is well, but once I save the page it causes an error with the rest of the page. If there are any images on the page those disappear once I save. It also creates a misalignment with the page header where all of the content slides up a bit and overlaps with the header menu. It's as if adding the code to the page overrides something essential to it's function. Has anyone else had success placing a Substack email signup on their page? Looking for some tips.