Search the Community

I'm using an embed code, pasted into a markdown block, to try and link to a website prototype hosted on the Adobe servers. It overlaps the space it's meant to sit in, rather than sizing proportionally (see screengrab). The embed code I got is <iframe width="1920" height="1080" src="https://xd.adobe.com/embed/46fe53f9-9d26-4448-827f-88b5d8d04224-13ad/?fullscreen" frameborder="0" allowfullscreen></iframe> I don't know anything about code so I can't tell if this is where the problem is happening. The page isn't currently live because it's not ready yet. Any assistance gratefully received.

Site URL: https://www.southendfostering.co.uk/ Hi All, Please help.. I have added a number of code injection blocks on my site www.southendfostering.co.uk and then added the style of them in the Custom CSS editor. The h1 title are working down to using just the h1 tag i belive but the div class = blu3h2 whilst working in the editor doesnt work on the live site. Please help! Code Below: Example Code in a code injection box on a single page: <div class="blueh2"> <h2>Apply to become a Foster Carer in Southend today.</h2> </div> Code in Custom CSS editor via 'Design' for all .blueh2: .blueh2 { background: #1c4f8f; padding: 10px; border-left: 8px solid #1c4f8f; border-bottom: 8px solid #1c4f8f; text-align: left; } Screenshot from editor: Screen shot from Live Website: Thanks, Luke

Site URL: https://orchid-flute-gfwg.squarespace.com/ Hi all, Can anyone help me with my coding? I'm pretty sure everything is correct, and it shows up fine on the mobile via Squarespace but on my phone, the custom fonts aren't showing up at all. I'm on an iPhone 8 Plus on Safari. Code // Custom Font // @font-face { font-family: Druk; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d79feed113772d538dfa60/1624743919175/Druk+Wide+Super.otf); } @font-face { font-family: Euclid; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a016d2d2442e68e90958/1624743958321/EuclidCircularA-Regular.ttf); } @font-face { font-family: Oaklinn; src: url(https://static1.squarespace.com/static/60d78e5b5e66bd5756e06a22/t/60d7a0fa2b37c143c11961f9/1624744186366/Oaklinn.otf); } // Custom Fonts Implement // p {font-family: Euclid;} h1 {font-family: Druk;} h2 {font-family: Euclid;} h3 {font-family: Druk;} h4 {font-family: Oaklinn;} h5 {font-family: Euclid;} button {font-family: Druk; font-size: 10px !important;} .sqs-block-button-element {font-family: Druk; font-size: 10px !important;} h3.portfolio-title { font-family: Druk !important; color: white !important; font-size: 15px !important; } .mobile-bar-wrapper *, h1 { font-family: Druk !important; } Any help would be appreciated!

Site URL: https://decade3.co.uk I am having some trouble enlarging the subscribe form that I have embedded into my website. I want the dimensions to remain the same for mobile as it is perfect, but ideally I'd like the width of the form and submit button to be about one third bigger on the web. This is the embed code: <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{clear:left; font: 30px Helvetica,Arial,sans-serif; width:100%;} </style> <div id="mc_embed_signup"> <form action="https://decade3.us6.list-manage.com/subscribe/post?u=9ac1cc22bc347b116038ab2ce&amp;id=a4ec61b98b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <label for="mce-EMAIL">An all-new site is coming soon. </label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email" required> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9ac1cc22bc347b116038ab2ce_a4ec61b98b" tabindex="-1" value=""></div> </div> <div><input type="submit" value="Request Early Access" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </form> </div> How would I go about doing this?

Site URL: http://www.hidearvirgule.com Hello guys, I'm from France, may I ask for your help: I want to make a page where I can generate some random words/ pictures clicking on a button. Is that possible with javascript, and if so, how can I incorporate it in Squarespace page ? Thank you so much for reading me, have a good night Flo

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://plane-wrasse-xbem.squarespace.com/ Hi, I have recently set up a 7.1 site and want to import my products. I have about 1300 to do. I have downloaded the import.csv and have created a test product that I can import correctly. However, I am trying to understand the html that is added to the product details so I can replicate and add it in bulk to my product description column rather than having to go and add it all after and I cannot find anything in the help guides as to why it does it this way. Or a guide to how to do it any other way? Has anyone done this? So far: My initial productdescription in csv was "This is a beautiful colour denim with a white freckle effect." Screenshot 1 First export of the product got me exactly the same text. So I then edited the product description on the web page to Screenshot 2 The export then gave me <p class="">This is a beautiful colour denim with a white freckle effect.</p><p class="">Great for dungarees, tunics and pinafores.</p><p class=""></p> I appreciate it no longer uses BR so starting a new <p class=""> seems to give the extra line It gives me a straightforward look on the page I can add < p class="" style="white-space: pre-wrap;"></p> gives me a space before text etc Has anyone done any manipulation of the csv file in this way? Any hints or tips or lists out there for what works and what doesn't? N Nikki

Hi - has anyone successfully verified their domain on Facebook? As part of the iOS 14 release, FB is requiring that we verify our domain and offers options to do this via meta-tag injection, HTML file upload, and DNS verification. I tried the meta-tag injection using the code injection feature on Squarespace, but it still wasn't recognizing the code on the site (although I do see the code when I look at the page source). Both FB and Squarespace have been unhelpful so any guidance would be VERY welcome. Thanks!

I have a summary block in my page but feel like the titles are visually hard to tell apart at first glance. I'd like to be able to put a horizontal line as a divider in between each title of the summary block if possible.

Site URL: https://goose-owl-jp53.squarespace.com/home-search I have this code that I used to embed on my Squarespace site: <iframe name="HomeSearch" src="https://mc931.yourkwoffice.com/search?viewport=37.27993217450236%2C-121.91691990441893%2C37.22138125060053%2C-122.00807209558104&zoom=14" width="100%" height="1200px" frameborder="0" scrolling="auto" class="frame-area"> </iframe> As you can see below, when I'm in editor the IDX feed shows up perfectly. When I exit editor, and go to the public site I get the error and the map doesn't show up. What am I missing?

Site URL: https://www.dandelot.net/sounds-for-the-young-americana Hi, I'm embedding a Bandcamp audio player on my page and right now it is not centered. I have tried <center> and a few other suggestions but can't get it centered. Can anyone help center the embed? The page (third element down): https://www.dandelot.net/sounds-for-the-young-americana The code: <iframe style="border: 0; width: 100%; height: 120px;" src="https://bandcamp.com/EmbeddedPlayer/track=2810117133/size=large/bgcol=333333/linkcol=0f91ff/tracklist=false/artwork=small/transparent=true/" seamless><a href="https://dandelot.bandcamp.com/track/americana">Americana by Dandelot</a></iframe>

Site URL: https://falkirk.squarespace.com/ Can anyone tell me how to create this same effect ensuring it is responsive? I have tried playing around with html and the code block but I can't get it to quite sit in line with the text. Thank you!

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.landelijkplatformnabestaandenzorg.nl/leden Hi all, I used a bit of coding on this website to embed a Google My Maps. In this embed you see a header/banner visible. I want to remove this banner. Does anyone have a html solution to remove this in code? I used the following code as you van see in the attachments: <embed type="text/html" src="https://www.google.com/maps/d/embed?mid=1vt8JsFLlyE3oGjG5gnfKxDDP5Ru1JIMh" width="100%" height="500" border="none" margin-left="-100px" margin-top="-100px"> Thanks in advance! Vivian

I want to move my ADD TO CART BUTTON next to the quantity button, right now they are stacked – mainly to reduce space on my website. Any ideas on what code to try?

Site URL: http://www.linehouse.london/tsp Hi everyone, I've been trying to get two Vimeo videos on a page (www.linehouse.london/tsp) to autoplay on loop, but after trying 5 different things and checking every thread about it here on the forum, I am still unable to make it work. Sometimes it works once, and then 'breaks' (as in, stops autoplaying after I refresh the page). Or it autoplays on my machine but not on others. I've tried doing it as a video block with embedding code, or simply as a code block - same disappointing results... Here's the code I've been using: <iframe src="https://player.vimeo.com/video/497646469?autoplay=1&loop=1&autopause=0&controls=0&title=0&byline=0&playbar=0" width="640" height="373" frameborder="0" allow="autoplay"></iframe> I'd also love to hide the Vimeo controls, if possible (I don't have a Premium vimeo account so can't change this is vimeo settings). Thanks!

Hello, I'm trying to utilize this timeline code from Codepen but I cannot figure out how to get it to work: https://codepen.io/itbruno/pen/KwarLp I have limited coding knowledge so any help would be great! I tried copy and pasting the CCS under custom CSS and then I copied the HTML and put it in a code block on a page. I also tried putting the CCS under the advanced setting. I think I'm missing a key step or two. Thanks!

Site URL: https://theministryofdesign.co.uk Is there a way to add an animation effect to a custom code block? I've some svgs using some custom code blocks but want them to 'fade in' - any ideas? Thanks in advance.

Hello! I recently came across the typewriter delete effect, courtesy of @taunphan. What I'm trying to do is changing the colors of the three different elements of the code. So for this example I would like "type" to be white, "writer01" to be of a certain hexcode. And then I would like to also change the color of the data-words according to a hexcode. Main components of what I wish to change: <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> Entire code: <div class="container"> <h1> typewriter01 | <!-- The words that we want to have typerwriter effect --> <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></span> </h1> </div> <style> /* CSS RESET */ /* ALIGN CONTENT */ .container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; } /* ADD CURSOR */ .txt-type > .txt { border-right: 0.08rem solid #fff; padding-right: 2px; /* Animating the cursor */ animation: blink 0.6s infinite; } /* ANIMATION */ @keyframes blink { 0% { border-right: 0.08rem solid rgba(255, 255, 255, 1); } 100% { border-right: 0.08rem solid rgba(255, 255, 255, 0.2); } } #page .section-background {background: white;} #page section * {color: black !important;} #page .content { width: 100%; } </style> <script> class TypeWriter { constructor(txtElement, words, wait = 3000) { this.txtElement = txtElement; this.words = words; this.txt = ""; this.wordIndex = 0; this.wait = parseInt(wait, 10); this.type(); this.isDeleting = false; } type() { // Current index of word const current = this.wordIndex % this.words.length; // Get full text of current word const fullTxt = this.words[current]; // Check if deleting if (this.isDeleting) { // Remove characters this.txt = fullTxt.substring(0, this.txt.length - 1); } else { // Add charaters this.txt = fullTxt.substring(0, this.txt.length + 1); } // Insert txt into element this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`; // Initial Type Speed let typeSpeed = 50; if (this.isDeleting) { // Increase speed by half when deleting typeSpeed /= 2; } // If word is complete if (!this.isDeleting && this.txt === fullTxt) { // Make pause at end typeSpeed = this.wait; // Set delete to true this.isDeleting = true; } else if (this.isDeleting && this.txt === "") { this.isDeleting = false; // Move to next word this.wordIndex++; // Pause before start typing typeSpeed = 500; } setTimeout(() => this.type(), typeSpeed); } } // Init On DOM Load document.addEventListener("DOMContentLoaded", init); // Init App function init() { const txtElement = document.querySelector(".txt-type"); const words = JSON.parse(txtElement.getAttribute("data-words")); const wait = txtElement.getAttribute("data-wait"); // Init TypeWriter new TypeWriter(txtElement, words, wait); } </script> Any ideas? Source: https://forum.squarespace.com/topic/159551-typewriter-delete-effect-typeit-or-something-similar/#comment-387144

Site URL: https://www.betweenbox.com/shipping-cost/ I am trying to add a shipping rate calculator to my website - like the attached images and site. I would like to show a range of different carriers like... Royal Mail, FedEx, UPS, DHL I have been searching the internet for hours and have not got very far :( If anyone has any tips, it would be much appreciated. Thank you in advance!

Hi, I'm looking to change the order of my code blocks to go by row right-to-left instead of column but can't seem to get the coding right. I've tried the following, but I don't think I'm targeting the right block. I've also tried the individual #block-yui but it didn't work either. Anyone have any suggestions? @media only screen and (max-width: 640px) { div#pricing+.row, div#pricing2+.row { display: flex; flex-direction: row !important; }} Site: https://orchid-flute-gfwg.squarespace.com/book-now Thanks,

Site URL: https://loesencial.mx/shop/ Hello, I have an issue with some CSS custom code I have on my webpage. When on desktop, the adjustment and margins works fine, it is centered. But the problem is on mobile I can't seem to make it adjust properly, and it hyphenates the animated word making it look terrible (I'm attaching a screenshot of my issue) Even on tablet the spacing makes it align to the left rather than centered. Is there a way to set the animated text to scale only on mobile to avoid that hyphenation? I'd prefer a line break, but a scale down would work too. I'm on Brine on 7.0. Thanks in advance!

Site URL: https://www.rollingpictures.ca Hi, I am using a plug-in for a video lightbox and it works ok. The only problem i'm having is that the "View reel" button is showing the word [LIGHTBOX] when the website loads. This should be hidden at all times. Is there any way to fix it?

So I've been trying to create a simple before/after slider for my website and after a while i managed to do some copy pasting that eventually gave me this code. The code works fine when simply put in a text document and launched as a html file but when added into a code block on squarespace the before picture streches with the slider rather than being cropped by it. I'm really not good at coding and any help will be appreciated. <div id="page"> <div class="wrapper"> <div class="before"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f277df199179a75be322/1595011709533/after.jpg" draggable="false"/> </div> <div class="after"> <img class="content-image" src="https://static1.squarespace.com/static/5ef72eea964b6e3a6fece508/t/5f11f26a402f1548b9366293/1595011696334/before.jpg " draggable="false"/> </div> <div class="scroller"> <svg class="scroller__thumb" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg> </div> </div> </div> <script>// I hope this over-commenting helps. Let's do this! // Let's use the 'active' variable to let us know when we're using it let active = false; // First we'll have to set up our event listeners // We want to watch for clicks on our scroller document.querySelector('.scroller').addEventListener('mousedown',function(){ active = true; // Add our scrolling class so the scroller has full opacity while active document.querySelector('.scroller').classList.add('scrolling'); }); // We also want to watch the body for changes to the state, // like moving around and releasing the click // so let's set up our event listeners document.body.addEventListener('mouseup',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('mouseleave',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); // Let's figure out where their mouse is at document.body.addEventListener('mousemove',function(e){ if (!active) return; // Their mouse is here... let x = e.pageX; // but we want it relative to our wrapper x -= document.querySelector('.wrapper').getBoundingClientRect().left; // Okay let's change our state scrollIt(x); }); // Let's use this function function scrollIt(x){ let transform = Math.max(0,(Math.min(x,document.querySelector('.wrapper').offsetWidth))); document.querySelector('.after').style.width = transform+"px"; document.querySelector('.scroller').style.left = transform-25+"px"; } // Let's set our opening state based off the width, // we want to show a bit of both images so the user can see what's going on scrollIt(450); // And finally let's repeat the process for touch events // first our middle scroller... document.querySelector('.scroller').addEventListener('touchstart',function(){ active = true; document.querySelector('.scroller').classList.add('scrolling'); }); document.body.addEventListener('touchend',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); }); document.body.addEventListener('touchcancel',function(){ active = false; document.querySelector('.scroller').classList.remove('scrolling'); });</script> <style>/* You can remove this page div in your website */ #page{ width:100%; height:100%; position:absolute; } /* Our normalize css */ *{ margin:0; box-sizing: border-box; } /* Our wrapper */ .wrapper{ width: 900px; height: 600px; position: absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } /* Our image information */ .before, .after { width:100%; height:100%; max-width: 100%; background-repeat:no-repeat; background-color: white; background-size: cover; background-position: center; position: absolute; top:0; left:0; pointer-events:none; overflow: hidden; } .content-image{ height:100%; width:relative; } .after{ width:30%; } .scroller{ width: 50px; height:50px; position: absolute; left:100px; top:50%; transform:translateY(-50%); border-radius:50%; background-color: transparent; opacity:0.9; pointer-events:auto; cursor: pointer; } .scroller:hover{ opacity:1; } .scrolling{ pointer-events:none; opacity:1; // z-index: 1; } .scroller__thumb{ width:100%; height:100%; padding:2px; } .scroller:before, .scroller:after{ content:" "; display: block; width: 3px; height: 9999px; position: absolute; left: 50%; margin-left: -1.5px; z-index: 40; transition:0.1s; Background-size: cover; } .scroller:before{ top:100%; } .scroller:after{ bottom:100%; } /* If you want to cahnge the colors, make sure you change the fill in the svgs to match */ .scroller{ border: 5px solid #fff; } .scroller:before, .scroller:after{ background: #fff; }</style>

Site URL: https://www.fleettitle.com/ I need to integrate a site with a third party app called Qualia. I embedded the required code into the footer but then cant seem to change the buttons on my site to correspond to the app. See screenshot attached. How do I do this???