jinlikegold

Update: This is crazy, but somehow the issue only resolved when I went into each individual page and clicked into the top section banners, then clicked "save" again. No changes made. But that reset the white space at the top of those pages. Why, Squarespace, why?

@tuanphanare you by any chance able to take a look? thank you!

Hi there, I recently had an issue where Squarespace encouraged me to turn off Developer Mode to troubleshoot an issue - Note: If you ever are tempted to do this, take screenshots of literally everything including your Pages and Site Styles backend because it will reset all kinds of stuff. I really should never have done it, but I thought it would be ok since I hadn't worked in Developer Mode (turns out this was something that my client had done with a previous theme customization). Anyway, I've fixed most of the issues, but there are some lingering issues. For example, on a number of my pages, there is now a white space / background gap showing behind the primary navigation, instead of having them overlay the top banner as before. I can't figure out how to resolve this issue since it wasn't happening before, and I haven't found anything in Site Styles to fix the issue. How it should look (the homepage is pretty much the only one unaffected): https://www.youbelongsd.com/ Example pages where you can see this issue at the top of the page: https://www.youbelongsd.com/about-page (screenshot below) https://www.youbelongsd.com/services-page https://www.youbelongsd.com/events etc... Thanks!

Thank you!! I did not know this, it helped me troubleshoot several of the errors myself.

@PMBMattI think it was the image size causing the issue! I put in smaller images and it seems to be fixed, so I'll let my client know they need to be resized. It's funny how I always assume something is the matter with my code, but it turns out to be a simpler fix. Much appreciated! P.S. I also appreciate you sharing that higher specificity takes longer to load - I didn't know that. Unfortunately in this case, I couldn't reduce the specificity as I needed to target each block with a different image change, but I'll definitely keep it in mind going forward.

Thank you so much to write all this out! I will definitely try some things out based on your suggestions.

Thank you. I have a number of plugins currently in use, so I'll have to go through and narrow down which one it may be.

Hi there, I put in a custom hover effect on some image block elements to have them change to a different image on hover, and they seemed like they were working fine at first. But now they are glitchy and taking time to load/respond. Any thoughts on troubleshooting? URL: https://www.youbelongsd.com/welcome-ybh - it's the 3rd section down with the round images My code: // changes images on hover to new images: // coworking: #block-yui_3_17_2_1_1668805059330_119688 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cd800bf01d24735339d1/1677184387214/Affordable+Coworking+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: 50% 25%!important; display: block; } // creative studios: #block-yui_3_17_2_1_1668805059330_120693 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdc468db8f5573f792e8/1677184454063/Creative+Studios+%2B+Equipment+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: center!important; display: block; } //business: #block-yui_3_17_2_1_1668805059330_121720 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdee22d8ce2869239595/1677184497770/Business+Development+-+On+Hover.jpg") no-repeat!important; background-size: cover!important; background-position: 40% 50%!important; display: block; } // community: #block-yui_3_17_2_1_1668810433020_105277 .sqs-image-shape-container-element:hover { background: url("https://static1.squarespace.com/static/5b478671f407b4f13da9e67b/t/63f7cdf2fdfe3f3d38d76f24/1677184503511/Community+%26+Cultural+Programming+-+On+Hover.jpeg") no-repeat!important; background-size: cover!important; background-position: 45% 50%!important; display: block; } /* hide image on hover */ div#block-yui_3_17_2_1_1668805059330_119688 a:hover img, div#block-yui_3_17_2_1_1668805059330_120693 a:hover img, div#block-yui_3_17_2_1_1668805059330_121720 a:hover img, div#block-yui_3_17_2_1_1668810433020_105277 a:hover img { opacity: 0; } Thank you!

Hi there, I know some console errors with Squarespace are normal, but there are some extra ones that I'm pretty sure are actual issues. The trouble is, I'm not even sure how to locate these errors, much less do anything with them. These errors are appearing across my site, which leads me to believe it may be something I'm putting in Code Injection from a 3rd party plugin. But I have no idea where they would be given the line number references here don't seem to point to anything and are different on each page. See bolded parts. URL: https://www.youbelongsd.com/membership-page membership-page:4895 Uncaught SyntaxError: Invalid or unexpected token membership-page:4933 Uncaught SyntaxError: missing ) after argument list blur.js:42 Uncaught (in promise) Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at it (blur.js:42:3933) at s.useContext (blur.js:42:5675) at cr (blur.js:57:31858) at blur.js:61:494 at blur.js:126:5191 at Generator.next (<anonymous>) at I (blur.js:126:4967) how it looks on the default home page: URL: https://www.youbelongsd.com/ www.youbelongsd.com/:2833 Uncaught SyntaxError: Invalid or unexpected token www.youbelongsd.com/:2871 Uncaught SyntaxError: Invalid or unexpected token blur.js:42 Uncaught (in promise) Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at it (blur.js:42:3933) at s.useContext (blur.js:42:5675) at cr (blur.js:57:31858) at blur.js:61:494 at blur.js:126:5191 at Generator.next (<anonymous>) at I (blur.js:126:4967)

Hi there, sorry about the delay. Here is a screenshot. Somehow the caption issue seems better on desktop, but it is still happening on mobile (switching back and forth between centered and off to the right. The image is also off center on most smaller screen sizes. And the URL again: https://www.youbelongsd.com/membership-page Thank you!

Thank you so much! Adding the * is what I was missing. I had already been trying to set it to the font family with !important, but for some reason it wasn't responding until I did what you suggested. Much much appreciated.

Hi @tuanphan, I see you sharing that it's possible to use CSS to ask Squarespace to inherit site styles for the font family. What do you use for the username / keyword here? For example, you wrote for someone as an example that you could put "font-family: tuanphan !important" - how do I find my site's equivalent? This is the page I am working on: https://www.youbelongsd.com/services-page I'm trying to get the image block title & subtitle to inherit the site styles paragraph font style (Proxima Nova). Thank you!

Hi @tuanphan, I remembered that you had shared a similar solution for me for the gallery block in the past, so I applied it to my new page that was not showing the meta text captions on mobile. It worked great, but for some reason, when the slide automatically changes, the caption on the next slide gets bumped to the right and gets squished. If I click the back arrow, it looks fine, but on automatic slide it is skewed right. It is fine in preview mode, but then is skewed on my actual phone. Not sure why the display:block is affecting this, please help! My URL: https://www.youbelongsd.com/membership-page (it is the gallery block lower down on the page, in the section called "Member Spotlight)

@paul2009that looks like a really helpful tool! Wish I knew about it sooner, but I'm definitely interested in trying it out. Thanks for sharing.

This is maybe a slightly self-indulgent rant, but I really am curious if other devs encounter this issue on this platform. Just now, a whole code block feature randomly stopped working. It was down on all devices. I even had the code saved separately so I was in my desktop code editor, trying to troubleshoot the issue. I finally posted a plea for help on here. Probably spent more than 30 mins on this one thing. ...and of course, as soon as I made the post, I refreshed the page and the code started working. No changes at all. This isn't the first time that I've wasted time trying to figure out something that was just Squarespace throwing a hissy fit. Sometimes I literally walk away and come back the next day, and the issue has vanished overnight. Sometimes I really dislike this platform because I feel like it shows me errors that don't exist simply because it's lagging behind the changes I'm making. Or it works perfectly fine in editing preview mode, but shows up differently on the main site. As a new-ish dev, I keep thinking that I'm making mistakes in my code. But no. It's just Squarespace. Anyone else have similar frustrations? Is there some kind of back-end secret that overrides these issues I should know about??