How do we fix this constant spacing issues with SS 7.1

Hi Folks, I have been updating my site over the last few days and I have run into a bit of a weird issue where squarespace is putting lots of empty space at the bottom of text boxes on larger screens.

I'm editing on a 24" monitor and it the design looks totally cool when editing. However when I click save, log out and look at the site it has put a ton of empty space under some of the text boxes which looks rubbish.

If I check on my laptop 13.4", the design looks totally cool.

It's also as it should be on Mobile, which I edited separately in the mobile tab for each page.

Does anyone have a piece of code I can pop in which stops this addition of extra space? Or indeed any other solutions to stop this happening and tighten it all back up again?

If you check out the site https://www.nikihutchison.com/ on a large screen pretty much every text box on the front page has this issue.

Many thanks

Does your 24" monitor have an effective resolution that means that the page content is constrained by the screen? 

Normally you want to make sure that for text blocks you are editing their size on a screen where you can see the full width of the page contents, that way you don't run into the problem of the contents getting wider and the text wrapping fewer times in a paragraph and hence leaving space at the top and/or bottom.

Hi @joshuahext,

Might be useful to provide a link to the site so people on the forum can try to solve this issue for you! My guess is that there are not big enough media queries for the screen size they are viewing the site at or something weird like that.

Hi @joshuahext a guess, but maybe because your section is set to align to middle. Does it make a difference if the section is set to align to top?

Hi, @joshuahext ok, it's because your main text block is set to vertically aligned center, change it to top, and this is what I see in my screenshot below.

In my screenshot, with the gap between text block and bottom line is because you will need to adjust the height of the text block once you align vertically top, then move the bottom line block up.

On 12/8/2023 at 3:08 PM, melody495 said:

Hi, @joshuahext ok, it's because your main text block is set to vertically aligned center, change it to top, and this is what I see in my screenshot below.

In my screenshot, with the gap between text block and bottom line is because you will need to adjust the height of the text block once you align vertically top, then move the bottom line block up.

Hi @melody495

I'm afraid that isn't the solution. I can't shrink the text block any further than it's current size whatever alignment I set it to. So there's something causing this massive spacing that's unrelated to my code (as the issue persists even if I remove it all) and the alignment. 

3 hours ago, joshuahext said:

Hi @melody495

I'm afraid that isn't the solution. I can't shrink the text block any further than it's current size whatever alignment I set it to. So there's something causing this massive spacing that's unrelated to my code (as the issue persists even if I remove it all) and the alignment. 

Sounds like probably a SquareSpace issue then. Have you contacted their customer care support? 

Might be able to use code to reduce the gap otherwise. 

12 hours ago, melody495 said:

Sounds like probably a SquareSpace issue then. Have you contacted their customer care support? 

Might be able to use code to reduce the gap otherwise. 

I've tried reducing it with code but unfortunately it you reduce it on the monitor it shows up on it overlaps on the others. 

I will reach out to Squarespace just wanted to make sure I wasn't missing anything.

Any further thoughts from anyone would be greatly appreciated though as speed is of the essence here. 

5 hours ago, joshuahext said:

I've tried reducing it with code but unfortunately it you reduce it on the monitor it shows up on it overlaps on the others. 

I will reach out to Squarespace just wanted to make sure I wasn't missing anything.

 

Any further thoughts from anyone would be greatly appreciated though as speed is of the essence here. 

From what I can see, with your current settings, the behaviour you are seeing is by design, this is just how the FE works. As your text block is vertically aligned centred, it will add padding top and bottom when the page stretches to fill in the extra space on bigger screen sizes. 

Can you share a screenshot of the effect of changing the vertical alignment? Big text block -> change vertical alignment to top, save, click on preview (arrow at top right), change browser to greater than 100% or until you see the big gap issue. Share it and we can see what it does?

I'm limited by what I can see and suggest by just inspecting your website. If you want me to take it thorough look for you, drop me an email. 

19 hours ago, melody495 said:

From what I can see, with your current settings, the behaviour you are seeing is by design, this is just how the FE works. As your text block is vertically aligned centred, it will add padding top and bottom when the page stretches to fill in the extra space on bigger screen sizes. 

Can you share a screenshot of the effect of changing the vertical alignment? Big text block -> change vertical alignment to top, save, click on preview (arrow at top right), change browser to greater than 100% or until you see the big gap issue. Share it and we can see what it does?

I'm limited by what I can see and suggest by just inspecting your website. If you want me to take it thorough look for you, drop me an email. 

Hey there! Okay, so I tried the zooming out crazy amounts and shrinking the block and it seems to have worked on my monitor. That's crazy. I just kept going "SURELY NOT" out loud the whole time. I need to wait until my client wakes up to check with them as to whether it's fixed on their monitor but that's crazy. I would never have thought of something as simple as zooming out wildly to fix it.

I don't get why FE wouldn't just make it flush with the block below at all sizes as standard though given that if you put two blocks together you obviously want them to stay together at all monitor sizes and as it always has on the 20 or so prior sites I've built but I guess things are always shifting and changing at the moment. That's kind of bonkers.

I'll reach back out here to say whether it worked for the client or not but if that's the solution I will obviously mark your last message as such and I will be in your digital debt forever ahaha. Thanks for working with me on this so far.

23 hours ago, joshuahext said:

 I would never have thought of something as simple as zooming out wildly to fix it.

Interesting. Maybe a similar issue with tablet size, but on bigger than normal desktop screens. 

S-E Web Design - Fluid Engine's GIANT Spacing Problem

On 12/11/2023 at 10:42 AM, joshuahext said:

I'll reach back out here to say whether it worked for the client or not but if that's the solution I will obviously mark your last message as such and I will be in your digital debt forever ahaha. Thanks for working with me on this so far.

Do let me know how it goes!

1 hour ago, melody495 said:

Do let me know how it goes!

That was the solution! I'll just go into a bit more detail to help anyone with the same issue:

So, at my 100% zoom level I can't shrink the text block. Then, even with centre alignment, zooming out, shrinking the text box and then saving works a treat. Now everything works perfectly on all monitor sizes. 

The only thing to flag is, if and when anyone else has this issue, whenever you change anything at all, the block will revert to having the massive spacing. So every time, before saving, zoom out to 200%, shrink the block last and then save. Learn to know where the other blocks will sit when you shrink the block because it has to be the very last thing you change. 

Thanks again! 

1 hour ago, joshuahext said:

Thanks again!

You are very welcome! 🙂 Glad it's all working for you.

The workaround is a bit annoying, but at least it works! Also if you will hand over editing to your client, worth checking what screen size they'll be editing on if it'll make a difference. 

Definitely the same issue with tablet size FE but your issue with a big screen is even less common! If you can report the issue to SquareSpace, maybe this will be another vote for them to fixing the FE grid spacing issues on less common screen sizes. 

3 minutes ago, melody495 said:

You are very welcome! 🙂 Glad it's all working for you.

The workaround is a bit annoying, but at least it works! Also if you will hand over editing to your client, worth checking what screen size they'll be editing on if it'll make a difference. 

Definitely the same issue with tablet size FE but your issue with a big screen is even less common! If you can report the issue to SquareSpace, maybe this will be another vote for them to fixing the FE grid spacing issues on less common screen sizes. 

Hahaha, they just said "ask people on the forums, we won't do anything for you. And we can't be held responsible for the efficacy of their solutions" so I don't think they're going to do anything. Definitely raised the issue though.

8 minutes ago, joshuahext said:

Hahaha, they just said "ask people on the forums, we won't do anything for you. And we can't be held responsible for the efficacy of their solutions" so I don't think they're going to do anything. Definitely raised the issue though.

😬 I've read they're not actively working on the FE grid issue, but hopefully they misunderstood your problem to justify that response ... But I also appreciate they can't fix everything, so naturally they will deprioritise issues that affect less people. 

Anyway, glad we got somewhere 😁

FYI everyone, the marked solution here - is not the solution.

55 minutes ago, Rustynz said:

FYI everyone, the marked solution here - is not the solution.

Hi, depending on how the website is set up and designed, the solution to the same problem can be different. If you describe your issue and share your website URL, the community can try and help.

From what I can tell/learn, there's NO solution to this major issue. It's like paying for new car and then immediately having engines issues that can't be solved.

On 9/19/2023 at 3:16 AM, Ziggy said:

Does your 24" monitor have an effective resolution that means that the page content is constrained by the screen? 

Normally you want to make sure that for text blocks you are editing their size on a screen where you can see the full width of the page contents, that way you don't run into the problem of the contents getting wider and the text wrapping fewer times in a paragraph and hence leaving space at the top and/or bottom.

I use a laptop to design websites. Do you think this is a problem?

I'm posting this in a few places in hopes it might help someone:

I think I actually figured out a solution. I was having a TON of spacing issues on a website I was working on. When I'm in the Squarespace editor, it looks perfect, and then I publish and there's weird spacing issues everywhere after text. Went to the forums to try to figure out why, but was disheartened to see so many people having the same issues.

My browser has been forever Google Chrome, but on a whim, I decided to try to edit my website using Firefox. And you guys... it fixed my spacing issues. When I opened up the editor in Firefox, it even showed where there were the weird spacing issues (that wasn't there in the editor opened up in Chrome). I fixed it up, and I repeatedly checked the published version in Chrome. Somehow it was magically fixed.

Hopefully this helps people out there. Have no idea if this was just a solution for me, but I think it's a Squarespace + Chrome issue.  (Fix this, Squarespace!!!) If this solves it for anyone else, let me know.

I just don't understand why this keeps happening when I make a change and then end up having to redo the entire section(s) of a page (no exaggeration).  I've uploaded a gif. Why is there so much extra spacing.  The experience is horrifying when viewing it on the web.  The inconsistency is maddening.  I've change spacing, margins, etc. and first it appears fixed, and then wammo.  I have the max width set at 1200 on purpose so that it doesn't stretch out but if a user opens their browser far out spacing once again becomes off kilter.  I understand that this is fluid engine but I know i'm not the only one who is going through this because I'm reading so many of these same stories that my head hurts but there doesn't seem to be any solution to this. Am I using the wrong browser, (chrome), should I use firefox? Do I need to try and keep my browser width the same size when I am editing (which is hard to know since I have a 34 inch curved monitor and a 16 inch macbook pro) so they are never going to be the same.  Where do I need to report this to because I understand this is a forum and thus far no one has had an answer so please just tell me where to take this higher and I will?  It costs to much money and to much time to have to constantly worry about  a spacing issue.  Thank you for listening.

On 12/12/2023 at 12:39 PM, joshuahext said:

That was the solution! I'll just go into a bit more detail to help anyone with the same issue:

So, at my 100% zoom level I can't shrink the text block. Then, even with centre alignment, zooming out, shrinking the text box and then saving works a treat. Now everything works perfectly on all monitor sizes. 

The only thing to flag is, if and when anyone else has this issue, whenever you change anything at all, the block will revert to having the massive spacing. So every time, before saving, zoom out to 200%, shrink the block last and then save. Learn to know where the other blocks will sit when you shrink the block because it has to be the very last thing you change. 

Thanks again! 

I have been having this issue repeatedly and this little hack - zooming out - works! Cheers guys

This does not work for me at all.  No way, no how, no shape, form, or fashion.  I gave up on this.  

I guess some developer heard me and didn't like what i wrote because here we ago again.  My website looks like crap because the spacing between paragraphs is inconsistent and look at this.

And when I add another text block on top of that to fill in the gap then the paragraphs are off.  There is just no winning with this.