Search the Community

Site URL: https://www.viperequitypartners.com/ Hello, I added custom CSS to center the contents of the Summary Block (in Grid view) and it's off-center. Any ideas what's going wrong? See screenshot and code below. Thank you! //center summary block, unlink from bios// .sqs-gallery-design-autogrid .summary-item-list { display: flex; flex-wrap: wrap; justify-content: center; pointer-events: none; }

Site URL: https://www.jimisaband.com/ Hello! I have placed a logo in my footer and it looks fine on desktop but is HUGE on mobile. It takes up the entire mobile screen. Any ideas on how I can fix this? website is jimisaband.com The template I used it Kitui, a 7.1 template

Site URL: https://tarantula-lobster-atz4.squarespace.com/ Hey everyone, Is there a workaround for adding hover text over grid gallery images? This is the page I’d like to add it to. I’ve been looking everywhere but no success yet. https://tarantula-lobster-atz4.squarespace.com/project-portfolio the password is TestingSiteBackCountry7992 Thanks in advance!

Site URL: https://hotelanimalmelb.squarespace.com/ I'm looking to change the order of some Image & Text blocks on my Squarespace 7.1 mobile site. WEBSITE: https://hotelanimalmelb.squarespace.com/ PASSWORD: animals I'm looking to put the image relating to 'THE 27 CLUB' heading on top when viewed in mobile. It currently organises itself to below the text and isn't the same as the other two paragraphs/images.

I'm trying to add this Back to Top Button with Scroll Progress Indicator to my site. https://www.jqueryscript.net/other/back-top-scroll-indicator.html I'm adding the code into code injection (footer), but I can't get it to work. I'm probably missing something. This is what I have done: <div class="progress-wrap"> <svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" /> </svg> </div> <style> .progress-wrap { position: fixed; right: 50px; bottom: 50px; height: 46px; width: 46px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.2); z-index: 10000; opacity: 0; visibility: hidden; transform: translateY(15px); -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); } .progress-wrap::after { position: absolute; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; color: #ecedf3; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 1; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::after { opacity: 0; } .progress-wrap::before { position: absolute; content: '↑'; text-align: center; line-height: 46px; font-size: 24px; opacity: 0; background-image: linear-gradient(298deg, #da2c4d, #f8ab37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; left: 0; top: 0; height: 46px; width: 46px; cursor: pointer; display: block; z-index: 2; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .progress-wrap:hover::before { opacity: 1; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: #ecedf3; stroke-width: 4; box-sizing:border-box; -webkit-transition: all 200ms linear; transition: all 200ms linear; } </style> <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha384-JUMjoW8OzDJw4oFpWIB2Bu/c6768ObEthBMVSiIx4ruBIEdyNSUQAjJNFqT5pnJ6" crossorigin="anonymous"></script> <script> var progressPath = document.querySelector('.progress-wrap path'); var pathLength = progressPath.getTotalLength(); progressPath.style.transition = progressPath.style.WebkitTransition = 'none'; progressPath.style.strokeDasharray = pathLength + ' ' + pathLength; progressPath.style.strokeDashoffset = pathLength; progressPath.getBoundingClientRect(); progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear'; var up<a href="https://www.jqueryscript.net/time-clock/">date</a>Progress = function () { var scroll = $(window).scrollTop(); var height = $(document).height() - $(window).height(); var progress = pathLength - scroll * pathLength / height; progressPath.style.strokeDashoffset = progress; }; updateProgress(); $(window).scroll(updateProgress); var offset = 50; var duration = 550; jQuery(window).on('scroll', function () { if (jQuery(this).scrollTop() > offset) { jQuery('.progress-wrap').addClass('active-progress'); } else { jQuery('.progress-wrap').removeClass('active-progress'); } }); jQuery('.progress-wrap').on('click', function (event) { event.preventDefault(); jQuery('html, body').animate({ scrollTop: 0 }, duration); return false; }); </script>

Site URL: https://www.thirstforallah.com/en/home Hey all, Any idea why safari on my mac won't show the rounded edges on my summary block. See www.thirstforallah.com/en/home/resources/articles . On my phone all 4 edges are rounded (in chrome - i use android). On chrome on my mac for some reason the bottom left corner is not rounded, but the others are. My CSS coding is as follows: //grid gallery curved edges// .slide.sqs-gallery-design-grid-slide .image-slide-anchor { border-radius: 5px !important; } .sqs-gallery-block-slideshow { border-radius: 5px !important; } .sqs-block-summary-v2 .summary-thumbnail { border-radius: 5px 5px 5px 5px !important; }

Site URL: https://www.thirstforallah.com Hey all, I recently purchased a plugin from squarestud.io and have been having trouble getting support regarding a plugin that causes my navigation links in the header to be underlined upon hover. See Nav Header One - CLICK HERE. This is currently only working on safari and does not work in chrome on my mac, but does work on my mobile in chrome. Any particular insight into what could be changed in the coding that could solve this problem? //Navigation underscore - squarestud.io// nav a:hover { background-size: 100% 0.5px !important; } nav a { padding-bottom: 6px; overflow: visible !important; background-repeat: no-repeat !important; background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important; background-size: 0% 0.5px !important; background-position: 0% 100% !important; white-space: initial; transition: all ease-in-out 500ms !important; -ms-transition: all ease-in-out 500ms !important; -moz-transition: all ease-in-out 500ms !important; -webkit-transition: all ease-in-out 500ms !important; } //End navigation underscore// Additionally, if you are feeling particularly generous, on mobile the underline surpasses the boundary of the link and goes across the whole screen. See below. Really grateful for the help i've received thus far on this forum. Thanks for your help!

Hi there, I have uploaded custom fonts via CSS and assigned them appropriately to where Id like them, however, now my image blocking text won't allow me to use the 3 custom fonts. Particullary in the paragraph section. Ive attached a picture. Where it says Dream Team, id like it to be in my heading 2 font but when I change it it also automatically changed the text below it. Can anyone help? Is there a glitch in my code?

Site URL: https://fetch-club-bedford.squarespace.com/ Hi All, Wondering if anyone can solve an issue I am having on the below website, when I add a scrolling widget from reviewsonmywebsite.com, on smaller screens it adds a sideways scrolling bar to the bottom of the website. I have tried adding a width/max width into the code but with no joy? Any help would be greatly appreciated! C. https://fetch-club-bedford.squarespace.com/ Password: fetch14 Widget Code: <div data-token="12xtOT8YJ6bmJYxW5Tiy2QfxLMSQo5MemeJxyKXj9BJhR5LbXS" class="romw-reviews"></div><script src="https://reviewsonmywebsite.com/js/embedLoader.js?id=16985fd9e429040ba7c6" type="text/javascript"></script>

Site URL: https://www.amandajamesbridal.com/ Any ideas on workarounds or custom code for selling and accepting deposits toward a purchase? I have a bridal collection and sell made-to-order gowns. I'll be launching e-commerce soon and was hoping to have it totally replace my current invoicing system. I currently use Square and email invoices to my clients. - The 1st invoice I send is to receive a deposit. - The 2nd invoice I send it to receive the remaining balance. In launching e-commerce, I was hoping to: - Have customers purchase a deposit through my site. Deposits are a set amount. Ideally the process would be similar to how a gift card works- a digital code is generated and emailed to clients once they make the purchase. - I was hoping they could then apply that credit towards the final purchase by entering the digital code. Currently Squarespace does not allow you to change the wording in the order confirmations of gift cards, otherwise I would just create a gift card product and call it a Deposit. I also tried creating a discount code labeled Deposit, but this doesn't work because when entered, it changes the taxable amount of the product. I need the original taxable amount to stay the same. Any suggestions?

Site URL: http://www.rustandweave.com Hello Does anyone know how to hide the header and footer off a product page? I have removed it off index/normal pages but cant remove it off the product page, have tried everything! Please help!

Hey, so I've got quite a bit of custom CSS code in my website (though it is all fairly simple), and all the code works exactly as I planned it to. However, I have this strange issue: when I first load the website, none of the CSS changes are visible, it's as if there is no custom CSS whatsoever. But as soon as I open the CSS editor, all of the correct changes pop up. I haven't made my site live yet, and I'm worried that if I do, none of those changes will display (my worries seem to be valid because when I open the mobile version on my phone, the CSS changes don't show up). In which case I would be wasting money on a website that doesn't work as desired. Anyone else having this issue? Anyone found a solution? I'm on a Pacific template, btw.

Site URL: https://www.thirstforallah.com/en/home/resources/articles Hey all, I'm trying to replace the magnifying glass in a search bar with the logo from my site. I believe I successfully did it, but am not sure how to align it and resize appropriately. The following is my css code: .sqs-search-ui-button-wrapper.color-light .search-input { background-image: url(https://static1.squarespace.com/static/5e8b6752beaf194f7c179f65/t/5efb7d7fcbb31971d517acb1/1593539974063/TFALogoclearico.png); color: #f7f7f7; border: 1px solid #eee; } Any ideas? You can see what I'm talking about here: https://www.thirstforallah.com/en/home/resources/articles Thanks!

Site URL: https://www.thechoreapp.com/blog/2020/6/23/how-to-make-family-friendly-cleaning-products We just added a blog page to our website and ran into an issue. We've changed our website text to be white, with coloured BGs. However the comments section has a hardcoded white BG and font type, which means our text can be seen. Can someone advise us on how to update the comment section text or BG without changing our fonts? THANKS!!! Update: We've temporarily changes our site text to a very light grey, so that people are able to comment... I'm sure we're going to be flooded with comments! 😉

Site URL: https://www.markhilton.me Hello, I am curious as how to change the color of the margin padding on my site which uses the Jasper template. I can't seem to find the option in Design > Site styles. I would like to make the margin padding a light grey for focus the reader's eyes on the actual content and provide definition. I have picked out a color to use with a hex code, so if someone could provide the appropriate CSS code, I would appreciate it.

Site URL: https://www.markdanielquintos.com Hi there, I am using template 'Avenue' (markdanielquintos.com) As of now, when clicking on my name in the site title, it links back to the homepage, which is great. I'd like for the subtitle of 'Cinematographer' to operate the same way. I've been googling for lots of code and have found a way to turn 'Cinematographer' into a link, but when I do so, it hovers as red like the rest of my links, I'd like for it to have no change when hovering over it, as 'Mark Daniel Quintos' is. Any tips? Thanks in advance!

Site URL: http://artkartavtsov.com/new-gallery I'm tried to change color of left/right arrows, but it turn up too hard for my knowledge of css. And I also want to get the arrows more visible with scaling them more or making them bold of both. Is it possible? Thanks for any help!

Site URL: http://www.chasinghawktattoos.com Hi, I am currently using the Jones template in the York Family and cant work out how to customise the font for my site heading and tagline. I have tried loads and only realised after reviewing one of the replies re: navigation, that maybe the code I'm using doesnt work in all template familys. I thought to avoid future questions around the same font issues, could anyone had any CSS coding for all headings, (h1, h2, h3) and body font specific to the York Family templates? I was hoping if you could include CSS for the same but for The Pacific Family templates as well 🙂 REALLY would appreciate it!! I'm about to go insane!

Site URL: https://www.theduophotography.com Hello, Ive being trying to fix the transparency of my header but i cant find any solution. I want to add in the first section a gallery but then the headers transparency doesnt work. Im not so familiar with coding but ive tried some solutions ive read in the forum here but nothing works. Does anyone know what i can do? Thank you!

Site URL: http://www.beyondedgenetworks.com How do you apply CSS only to a non-linked or non-public page? We are currently updating a few pages on our existing website that has CSS applied most pages at some level. Better put, can you add CSS to these new pages when they are not linked to the public portion of the site?

Site URL: https://jackshugruedesign.com Hi everyone- I'm hoping someone can help me with my website. I am using the SUHAMA template, and on my Home page I have 8 individual buttons that link to their own particular work page. I want to customize the button colors to match the most prominent color of the work it corresponds with. For instance, I want the "Hoops" button on the Home page to be the same orange as the basketball thumbnail that pops up when you hover with your cursor over "Hoops" from the Work page. So, I want all buttons to have their own color! I can provide HEX color codes or any other pertinent information to make this work! Thanks everyone!

Site URL: https://www.markdanielquintos.com/selected-work Hi, I am using template 'Avenue' and would like for the images that 'slide up' to do so at different times as opposed to all at once. Ideally it'd have a cascade effect. Any way to do this? Thanks!

Site URL: http://www.ricksouza.com Hello I am trying to add a line of text on hover on Flatiron template. Right now on hover there's scale and darken effects. I also want a line of text to come up with a description, something that's not the page title, but custom. Can anyone help? Thanks

Hi, I've used the carousel block gallery for my page, designed on Brine template. Even though the images have no links (clickthrough URL), the cursor changes to pointer on hover. I'd like to have the cursor to keep its default arrow mode, rather than changing to the hand pointer. Tried some codes I found online but they don't seem to work. The page is still private, but am hoping this image helps to illustrate the issue: Any help with custom CSS code to keep the cursor as an arrow would be hugely appreciated. Thanks!

I've set up a promotional pop-up but have run into a problem: I want it to be clickable but don't want to use the button feature in the "Action" sub settings. The default Squarespace button doesn't fit the aesthetic of the pop-up image and messes up the image ratio. (Screenshot 1 depicts the pop-up without the button, screenshot 2 depicts with the button.) I'd like the entire pop-up to be clickable without the use of a button. Is there anyway to make this happen? I'm happy to use a code injection necessary, but it would be nice to get a pointer in the right direction since I don't have any experience with coding. Thank you in advance for your help with this!