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!

On 3/3/2023 at 1:15 AM, creedon said:

It may be helpful to know that for diagnostic purposes you want to have your Inspector window open, clear the console messages, then reload the page. From there you should have full access to the errors and you can open the errors, arrow toggle, and trace down errors.

At least that is how it works in Chrome DevTools. I assume other browsers have similar diagnostic tools.

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.

18 hours ago, PMBMatt said:

Hello! From the code you provided, it seems like you are using CSS to change the background image of some image block elements on hover, and then hiding the original image.

If the hover effect was working fine before but has now become glitchy and slow to load, there are a few possible causes you can check:

1. Image file size: The images you are using for the hover effect might be too large in file size, which can cause slow loading times. You can try compressing the images to reduce their file size, or using smaller images.

2. Server response time: The server hosting your website might be experiencing high traffic or other issues that are causing slow response times. You can try accessing your website at different times to see if the issue is consistent or intermittent.

3. CSS specificity: The CSS selectors you are using might be too specific, which can cause the browser to take longer to load and render the styles. You can try simplifying the selectors to see if that improves performance.

4. Browser caching: The browser might be caching the images and styles, which can cause the hover effect to load slowly or not at all. You can try clearing your browser cache or using a private browsing window to see if that helps.

I hope these suggestions help you troubleshoot the issue with your hover effect!

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

5 hours ago, Beyondspace said:

I think you should discuss this issue with the third party which you are working with. They can give you a helpful suggestion

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)

On 1/26/2023 at 4:55 AM, tuanphan said:

I don't see Member Spotlight. Can you take a screenshot?

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!

22 hours ago, tuanphan said:

Add to Design > Custom CSS

.image-title *, .image-subtitle * {
    font-family: 'proxima-nova' !important;
}

With some fonts I use often, I already remember their font families, for example: monospace, proxima-nova, futura-pt,..

For the rest of the fonts, I need to go to Site Styles, set that font for any element, then inspect the element to check what its font family is.

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.

On 7/15/2021 at 1:59 AM, tuanphan said:

Find this code in Custom CSS

h1 {
    font-family: jaf-lapture,serif;
    font-weight: 400;
    font-style: normal;
}

change it to

h1 {
    font-family: jaf-lapture,serif !important;
    font-weight: 400;
    font-style: normal;
}

 

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!

On 10/24/2019 at 5:11 AM, tuanphan said:

@FrancesMc Please "Like" if the answer is correct

Remove above and add this

@media screen and (max-width:480px) {
/* Show description */
.sqs-gallery-block-slideshow .meta {
    display: block !important;
}
/* Font size */
.sqs-gallery-block-slideshow .meta * {
    font-size: 12px !important;
}
}

 

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??

On 4/10/2022 at 12:36 AM, tuanphan said:

Try adding this code to Page Header

<style>
  figcaption.gallery-caption.gallery-caption-reel {
    position: absolute !important;
    top: 50%;
    margin: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
figcaption.gallery-caption.gallery-caption-reel>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

</style>

 

Hi Tuan, is this possible to do on a 7.0 site with a gallery block set to carousel? This style by default will not allow displaying titles or subtitles of images, but I would really like it to. Thank you.

Hi there, I'm trying to troubleshoot a dropdown menu that isn't working on the default blog page. I created it as an Archive block to show blog categories on a separate blog landing page (actually an index page), but it isn't playing well with the blog posts once you click on the categories / go to the Squarespace default page. Despite the z-index, which helps the dropdown part overlap on the landing page, the Squarespace blog pages make the rest of the dropdown vanish into the posts.

So since I can't make that work, now I'm trying to make a drop UP menu instead. I'm able to make it drop up with a "bottom" property added, but then the whole clickable part vanishes once it's clicked, leaving the menu hanging with no way to close it. Any idea of how to fix this?

My CSS:

.archive-block-wrapper.archive-block-setting-layout-dropdown {
    width: 80%;
    position: absolute;
    z-index: 1!important;
    bottom: -80%; // this positions the whole menu where I want it and makes it drop up
  }

URL: https://www.youbelongsd.com/blog

On 12/11/2022 at 1:16 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:901px) {
div#block-63769308103f8746b306de17+.row .span-3 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}
div#block-63769308103f8746b306de17+.row {
    display: flex;
}
div#block-63769308103f8746b306de17+.row .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
}
}

Thank you, this worked perfectly. You are a CSS wizard!

P.S. I am not familiar with ways you are using selectors in Squarespace. If you place "div" in front of a block id, you can use "+" to add classes of blocks beneath that first element? How does this work?

This has been one of my biggest headaches in Squarespace, because if I were coding from scratch, I would of course have this entire section in a div, but in Squarespace it is all separate blocks. Your method may save me from having to create custom code blocks all the time!

On 12/10/2022 at 1:20 AM, tuanphan said:

I see you use absolute to move dropdown to left. You can use margin-left: 0 instead.

#collection-5b4791458a922da6575e66cf .archive-block-wrapper.archive-block-setting-layout-dropdown, #collection-6344ae24c67c8d00e7d624ba .archive-block-wrapper.archive-block-setting-layout-dropdown {
    margin: auto;
    width: 80%;
    margin-left: 0;
}

Actually, I am using absolute to help the dropdown not push the blocks down. If I take out the absolute positioning and use your margin solution, it makes it so the entire block gets pushed down by the dropdown again. I am trying to find a solution that doesn't do that, but still shows up on the default blog page.

Hi there, I have a simple 4 column layout in one of my page sections where there are images, text, and buttons. Right now, the first column has less heading text than the other three, which is making the button below it higher in just that one column. I know I could change just the bottom margin in that block as a temporary fix, but all the content may change from time to time. Is there a way to get the buttons to stay in the same alignment no matter how much text there is above them?

I know Flexbox automatically makes equal height columns, and I actually have the section flexing on tablet view so this problem isn't happening there, but for when I try to apply display:flex to the full screen view, it's not affecting how the columns look.

URL:  https://www.youbelongsd.com/welcome-ybh#home-learn-more

Thanks!

@tuanphanhi there, I have another question about the custom dropdown. I added one to Squarespace's default blog page header, so it would show up when someone clicks on a blog category. Unfortunately, when you click the dropdown menu, the default site post blocks cut off the content. The z-index should prevent this issue, but it's still not showing correctly. Any thoughts?

Site url: https://www.youbelongsd.com/blog

Another example: https://www.youbelongsd.com/blog/category/Community

On 12/2/2022 at 7:51 PM, Beyondspace said:

I think we can achieve this layout via the people section have some css code to custom the action of hovering.

 

Your comment was a little confusing, but it helped me realize I could add a div and hidden overflow, and animate it to jump up on hover. Thanks! 

Hi there, I am working with a custom code block that has various membership options in different cards, and hoping to create a collapsible overlay with the features similar to this (but not with summary blocks): https://ghostpluginssuper.squarespace.com/pokit-summary-block/?password=ghost

So far I have some javascript in place to make a simple animation happen on mouseover, but I'm not sure how to get a part of the text content to jump up. Any tips would be appreciated. 

Site url: https://www.youbelongsd.com/membership-page

11 hours ago, tuanphan said:

I see you solved this?

I ended up getting a plugin that made it the layout I wanted. I would still be interested in the code for changing the layout (image on left, text on right) of a carousel summary block item, though! I have tried to do that in the past with code and was not successful. 

On 6/16/2022 at 2:13 AM, tuanphan said:

You mean

• Achieve carousel (left/right arrows)
• Can add multi items with image left text right

Is this right?

If yes, just choose carousel layout, then we will give code to change arrow style & change image left text right

 

Hi Tuan, what is the code to change the layout in carousel summary blocks so the image is on the left, the text is on the right? I am in 7.0 Brine. Trying to make a testimonial slider like this original poster has, but it's not working very well so far. 

Link: https://www.youbelongsd.com/welcome-ybh#home-testimonials