Search the Community
Showing results for tags 'code-injection'.
-
Site URL: https://carnation-sailfish-2n5d.squarespace.com/ Site password: Navigation Hi can anyone tell me why my home page has a weird horizontal overflow and how to stop it? It's really strange, it's on the right hand side but only for the first half of the homepage, and then sometimes disappears by the time I scroll to the bottom / back up to the top. Is there something in my code that is causing this issue or is it a Squarespace / web glitch?
-
Hey everyone, I have an issue with trying to make my sites footer transparent again. I have this bit of code within the Footer field in my Code Injection advanced section. It successfully made my footer transparent site-wide before the latest update. Now, it no longer works. Silly how a very simple design choice is not able to easily be implemented with Squarespace. Can anyone help me adjust the code to make it work with the latest update, please? Thanks! Site: https://www.KAJStudio.com/ <style> body.homepage { position: relative; } body.homepage footer#footer-sections { position: absolute; bottom: 0; left: 0; z-index: 999; width: 100%; } body.homepage footer.sections section, body.homepage footer.sections .section-background { background: transparent !important; } </style>
-
Code in code block is affecting Fluid Engine Grid
joshuaechevarriadop posted a question in Customize with code
I have inserted a code block that includes a display:flex property - for some reason this is causing the fluid engine grid to go crazy and every time I save the progress - my code block location is completely shifted. Do you know why this would be the case? Is there a way to stop the code from affecting the rest of the website? this is the code and the effect of the code on the text is below <style type="text/css"> .wordtwo{ display: flex; font-size: 40px; font-family: "Bebas Neue"; font-weight: bold; text-decoration: none; color: white; opacity:0.8; padding-top: 30px; padding-bottom: 0px; margin: 8%; } .t-anim{ transform: translateY(-20%); width: 100% } .o -anim{ transform: translateY(-30%); width: 100% } .l-anim{ transform: translateY(-60%); width: 100% } .s-anim{ transform: translateY(-40%); width: 100% } .wordtwo:hover .t-anim, .wordtwo:hover .l-anim, .wordtwo:hover .s-anim{ transform: translateY(0%); transition: 1s all; } .wordtwo:hover .o-anim{ transform: translateY(0%); font-size: 40px; transition: 1s all; } .wordtwo:not(:hover) .o-anim{ transform: translateY(-30%); font-size: 30px; transition: 1s all; } .wordtwo:not(:hover) .t-anim{ transform: translateY(-20%); transition: 1s all; } .wordtwo:not(:hover) .l-anim{ transform: translateY(-60%); transition: 1s all; } .wordtwo:not(:hover) .s-anim{ transform: translateY(-40%); transition: 1s all; } </style> </body> <a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a> <div class="anim-wrapper"> <div class="t-anim">T</div> </div> <div>O</div> <div class="anim-wrapper"> <div class="o-anim">O</div> </div> <div class="anim-wrapper"> <div class="l-anim">L</div> </div> <div class="anim-wrapper"> <div class="s-anim">S</div> </div> Screen Recording 2022-11-28 at 4.40.40 PM.mov -
Hide hovering homepage thumbnail + hamburger menu on mobile
erkmu posted a question in Customize with code
Hi there, I am setting up a blog page that I want to be a standalone entity that doesn't include the navigation bar and header thumbnail that typically appear on my website. I have been able to successfully hide these elements by adding the following code in Settings > Advanced > Page Header Code Injection: <style>header, footer, mobile-bar {display:none !important; } </style> But when I visit the page on mobile, the elements return. Is there a modified version of the code that will successfully hide them on this blog page (without making them disappear from the other pages on my website)? Thanks for your help! -
Hello, I'd like to create an email campaign archive of past newsletters that I've sent via MailChimp and display it on my website. I created a code block and inserted the below code that MailChimp provided, setting it to display as HTML: <style type="text/css"> <!-- .display_archive {font-family: arial,verdana; font-size: 12px;} .campaign {line-height: 125%; margin: 5px;} //--> </style> <script language="javascript" src="//sarahmhoban.us14.list-manage.com/generate-js/?u=ef858ac15ac20d2ee21558861&fid=67844&show=10" type="text/javascript"></script> On Squarespace, it displayed as "Script disabled" in the code block and then showed up as blank when I tried to post to my website. I tried injecting the code into the page header and saw no change. Any suggestions for how to get this to work correctly? Thanks!
-
Hi, Here is the link to my website: www.taggernordic.com I would like the "Solutions" page to have a dropdown menu but to stay a clickable page with the current information on. So the solutions of creating a folder and then adding pages to it does not work here. Is here any way to inject code to do it? Thank you very much. -
Happy thanks giving everyone! Please see attached images for details, I photoshopped couple renderings showing what I'm looking for, appreciate who can help me on this issue, I'm with business plan: I'm looking to put dozens of review cards/testimony in one section with slider buttons, would be great if i can keep all cards the same size, and integrate "show more" button with long texts. a floating window showing full texts when you click "show more" button. Please let me know thank you!
-
I want when user on blog page click on read more it will open in a light box or pop, instead of redirecting on specific page https://bluebird-kumquat-e56g.squarespace.com/blogs
-
Squarespace 7.1 Rotating Slideshow Gallery full bleed mobile
Skylab posted a question in Customize with code
Hello. I just upgraded to Squarespace 7.1 and I love it, I think it's great and big improvement over 7.0. I made a full bleed gallery at the top of the homepage which looks great on desktop but then gets cut off when I go to mobile view. Is there a way to show alternate images for when you are in mobile view? I could create some vertical friendly images for mobile. or Is there a way to crop the rotating images better? Thank you!! -
Hide Nav links in Mobile View only - keep hambuger
Kath_HampersFor posted a question in Customize with code
Hi, no css coding seems to work - I would like to remove the nav links and pink background on mobile view only, but keep the hamburger.
-
Peace and blessings! The problem I am currently having is my banner images and background images for section blocks do NOT resize for mobile view. (and / or vice versa) Website Address is as follows: https://www.goodsocietyworld.com/ I have sized the images to be standard 2:1 wide. This works perfectly for mobile (when I size the block section to small). But when I go to mobile the image is distorted. OR whenever I make the block section perfect sized for desktop, it ends up distorted for mobile. I've seen codes that allow the TOP banner to stay congruent amongst both desktop and mobile, but the remaining banners in the lower blocks do not stay congruent. Hopefully the attached screenshots help out. Greatly appreciate any advice or help anyone has! Thanks! Sincerely, GoodSociety
-
Hi Everyone, I'm trying to add a secondary "View Cart" button underneath my "Add to Cart" button on each of my product pages. I've followed the tutorial listed here, and it has worked great in adding the secondary button where needed, however, once you back out of one product and into another on mobile, the button becomes invisible. If you click the area where the button is supposed to be, it will in fact take you to the Cart, but you can't actually see the button. The problem seems to be unique to mobile. In Squarespace's mobile preview the button is fine on each product but when testing the site on my actual mobile phone, it disappears as described. Any ideas? Site password: hibean The problem is in the "Prints" area -
I want to hide the price of this and other specific products, but I still want my customers to be able to enter the site and view the information displayed about them. I tryed to add this in code injection directly on the product page in additional info but it does not seem to be working. <style> .product-price { display: none; } </style>
-
I'm having an issue with updating a site to 7.1 This is simple site it used to have an animated crawl of logos I could drop down in the bottom of this page and show the different companies they work with. I have tried Slideshow and images to get the same effect.. they are either too large or won't animate. The current version is using the arrows to manually scroll through (client doesn't like that) and it doesn't like mobile. I have attached some screen grabs and a url. https://www.pegasusok.com/ Just need these to slide or move across the screen - show 3 at a time and move through the 25 different logos I have, It could scale down on mobile or switch to just a single image.. but I don't believe we are doing totally different blocks in a mobile yet. Thoughts? seems like a simple thing, but not finding anyone posting CSS - one youtube with the college logos, but he is using HTML with it too and that seems like an odd hack. anyway would appreciate any thoughts. Thanks Marc
-
Hi, I am just putting together a pop up to promote a black friday code for a client. They simply want the code to appear once they have gathered the email from the client. I have put this together but when I add the post submit text it appears just awkwardly underneath the GDPR privacy disclaimer. (shown below) Is there a way for the post submit to simply have the desired text in the centre of the box? Like i've mocked up below. Help would be appreciated asap as the offer goes live tomorrow! Thanks in advance!
-
Website: https://www.thesoaresprotocol.com/ Hi there! I am trying to find a way to place a 4K logo animation video prior to my visitors reaching the homepage. An autoplay with no embedded frame and no additional visuals. Something minimalist and filling the entire screen. Is there a code block I could use? And if yes, where should I upload my 4K file? Thank you in advance.
-
Adding a whats app link in social link block
cristinabarata posted a question in Customize with code
Hello all, I'm adding the code below into my settings/advanced/custom CSS/footer, but the Whats App icon is not showing on my social block. What am I doing wrong? /* Add me to Code Injection (Footer) to get whats app logos for whatsapp links*/ footer.sections [href*="wa.me"] { visibility: hidden; position: relative; } footer.sections [href*="wa.me"]:before { visibility: visible; content: "\f232"; font-family: FontAwesome; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } The website is: https://backend-oselka.squarespace.com/contato Password: Oselka2022 Can you help me? TIA! -
Hi, I see a few people have asked similar questions without concrete solutions. Does anyone know a relatively simple code-injection to force landscape on mobile devices. I like how my site looks in Landscape mode and instead of adding new mobile friendly images I would like to force the website to show in landscape on phones. Before I reach out to programmers I was wondering if anyone has a solution here. Thank you! Best, oliver -
Hello, I am on the bottom-tier plan but I had successfully used some code to hide and change features on Mobile. It was working fine, and I don't think I have changed anything, however, today I noticed that my mobile page is suddenly a complete mess. It looks fine in the Squarespace mobile preview, but looks shocking on an actual mobile. I would love any help. Thanks
-
I'm uploading images that I dont want people ripping from my webpage, or inspect element. is there anyway I can potentially hide the right click or get rid of both the right click and encrypt the link from the inspect element. i'm using the mark novo template. -
I have done some custom code on the newsletter email box to surround the submit button with the same border as the field itself using absolute positioning. My issue is that if you click the "Book a Demo" button without entering an email, the error message offsets (moves down) the form email field, but doesn't offset the button. As a result I get strange spacing as shown in the screenshot below. Any JS ideas on how to stop the error message from offsetting the field? Because the button has an absolute position and the field does not, I assume that is how it would have to be done, I just don't know which code to invoke to do it. Thanks!
-
Hello, hoping somebody can help here. Working on a website for a dentist and want to display the opening hours aligned. Tried different codes or markdown blocks which kind of worked fine in the centre but for some reason not in the footer. All the weekdays should be aligned to the left and the hours to the right or at least have the same starting point and distance to the weekdays. At the moment it just looks a bit wonky.
-
I have implemented correctly formatted structured data/schema markup inside two of my personal website pages, most importantly the About/bio page. The checked and re-checked JSON-LD markup is injected inside the Advanced section of the pages meant for such code. There are no formatting errors in this schema markup, and the code passed muster, too, with Squarespace support, who confirmed it is correct. But I can tell using Google Analytics via the Console set up for the website that after several months of being in there and much re-crawling etc., Google persists in not seeing any of the structured data whatsoever. My structured data is entirely invisible to Google, and I can't figure out why. Zero rich results show up for this data, and also, nothing appears in Enhancements, viz. "No enhancements yet.". Core Web Vitals show "no data". Nothing showing any error(s). It seems impossible to reach anyone at Google on this matter, and of course Squarespace is divorced from the problem. Can anyone out there help me? The pages are: https://www.phoebeeaton.com/bio https://www.phoebeeaton.com/books
-
Edit or Remove "Older Posts"/"Newer Posts" on Blog Navigation
adamdaviskyh posted a question in Customize with code
I am using a blog on my site to create a custom course and do not want "Older Posts" and "Newer Posts" to show up at the bottom of the page. I would like to either have only the arrows or change the wording to simply "Next" and "Previous." I know this is possible as I have seen others have success in other forums, but none of the code has worked for me. Any help with this would be greatly appreciated! https://www.alive.productions/otsessions -
How can I remove the search bar from a single page?
5003554 posted a question in Customize with code
I have a stand-alone page that I want to remove the search bar from entirely. I already coded the Header and Footer to be removed, but the search bar still remains.
.png.aca4488a229a514bc6a20ae361a98d54.png)
