NikiHutchison Posted September 19, 2023 Share Posted September 19, 2023 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 Link to comment
Ziggy Posted September 19, 2023 Share Posted September 19, 2023 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. MoeTalks 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
AlexSan Posted December 7, 2023 Share Posted December 7, 2023 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. Link to comment
melody495 Posted December 8, 2023 Share Posted December 8, 2023 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? -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
melody495 Posted December 8, 2023 Share Posted December 8, 2023 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
joshuahext Posted December 9, 2023 Share Posted December 9, 2023 (edited) 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. Edited December 9, 2023 by joshuahext Link to comment
melody495 Posted December 9, 2023 Share Posted December 9, 2023 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
joshuahext Posted December 10, 2023 Share Posted December 10, 2023 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. Link to comment
melody495 Posted December 10, 2023 Share Posted December 10, 2023 (edited) 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. Edited December 10, 2023 by melody495 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
joshuahext Posted December 11, 2023 Share Posted December 11, 2023 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. Link to comment
melody495 Posted December 12, 2023 Share Posted December 12, 2023 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! -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
joshuahext Posted December 12, 2023 Share Posted December 12, 2023 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! zoester300 and rsmag_ 2 Link to comment
melody495 Posted December 12, 2023 Share Posted December 12, 2023 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
joshuahext Posted December 12, 2023 Share Posted December 12, 2023 (edited) 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. Edited December 12, 2023 by joshuahext Link to comment
melody495 Posted December 12, 2023 Share Posted December 12, 2023 (edited) 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 😁 Edited December 12, 2023 by melody495 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Rustynz Posted March 14 Share Posted March 14 FYI everyone, the marked solution here - is not the solution. Link to comment
melody495 Posted March 14 Share Posted March 14 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. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Rustynz Posted March 17 Share Posted March 17 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. MoeTalks 1 Link to comment
KatyRose Posted April 28 Share Posted April 28 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? Link to comment
itsasunnyday1 Posted May 20 Share Posted May 20 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. Link to comment
MoeTalks Posted May 21 Share Posted May 21 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. Link to comment
zoester300 Posted June 26 Share Posted June 26 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 Link to comment
MoeTalks Posted June 26 Share Posted June 26 This does not work for me at all. No way, no how, no shape, form, or fashion. I gave up on this. Link to comment
MoeTalks Posted June 27 Share Posted June 27 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. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment