Large gaps between two sections of the website

Hi guys,

I have the following problem:

On some of my subpages - not limited to the one I'm presenting now - I have an extreme amount of extra space between two sections. I don't know what is causing this. I have the same problem on my smartphone, only on a smaller scale. The div class "content-wrapper" is responsible for the space.

However, I don't have a custom code block on the section and I haven't installed custom code via the page settings. To rule out this potential cause. I have installed custom code on other sections of the page, but in my opinion it cannot be responsible for this.

Page URL: https://deinkikompass.de/midjourney-prompt-generator

I would be very grateful for any ideas and help.

Thank you,
Jannik

Hi @jannikbln, click Edit Section, turn off Fill Screen. This will allow you to have full height of the grid within the section. 

Hi @melody495, thanks for your reply. I did that already. Unfortunately, no change regarding the gap. 

1 hour ago, jannikbln said:

Hi @melody495, thanks for your reply. I did that already. Unfortunately, no change regarding the gap. 

It looks fine on my screen (on my laptop screen currently), what screen size are you editing this on?

Seems like the HTML block is not playing nice? That section seems to be text-based, you might find using a section with the Classic Editor works better for you.

Yes, on my laptop screen it looks fine too. 

On my 27'' inch screen, the gap is huge and on my phone there is also a bigger gap than there should be. That surprises me too.

Edit: On my laptop screen (13'') I have the same problem, two sections further down. But maybe this is due to the three code blocks (with adverts)...?

6 hours ago, jannikbln said:

On my 27'' inch screen, the gap is huge and on my phone there is also a bigger gap than there should be. That surprises me too.

Edit: On my laptop screen (13'') I have the same problem, two sections further down. But maybe this is due to the three code blocks (with adverts)...?

I would suggest switching those sections to using the Classic Editor if possible. That seems to behave better when you don't really need the functionality of Fluid Engine.

Code block might be causing some of the issues, I would need to check. But with the section in my screenshot, that uses HTML code block, for that I would definitely recommend using the Classic Editor section. It should work better. Let me know how it goes.

If the Classic Editor doesn't help, then could manipulate the grid with CSS.

I have this same issue.  The fluid engine's inability to maintain consistency has me on the verge of leaving the squarespace platform completely.  I spend countless hours trying to nudge things with custom CSS to achieve even mediocre results.

https://helicon-salamander-mf7x.squarespace.com/home-v2

2 hours ago, ghostnthetoast said:

I have this same issue.  The fluid engine's inability to maintain consistency has me on the verge of leaving the squarespace platform completely.  I spend countless hours trying to nudge things with custom CSS to achieve even mediocre results.

https://helicon-salamander-mf7x.squarespace.com/home-v2

 

 

Can you take a screenshot of problem?

Sure, see below.  As a successful mobile product manager in another life, here's my feedback:

• The grid system needs to increase it's "resolution" by about 2x in order to give users decent control of positioning and alignment.  What I mean by that is each box or pixel of the grid system should become 4 individual boxes or pixels.  Right now the system feels very ham-fisted without using custom CSS to work around grid alignment limitations. 
• Grids should fill the entirety of each section.  Stop asking users how many rows they want.  As a a system user, how should I know - I want to fit and arrange my content.  Filling the entire space with 'grid' would make everyone's life easier.  
• Element relationships to one another should be clearly definable within the interface.  As you can see below, I'm trying to place text boxes within graphical box elements.  The system doesn't truly understand that, nor respect the relationships I'm trying to set up.  Perhaps this is attainable/definable within the current system, I certainly hope so, but it's not obvious how to make that happen.  See image below with two alignment problems:
  1. Cost Development & Modeling doesn't respect the boundaries of it's box at certain resolutions
  2.  Owner's Representative Services and the icon to it's right do not respect alignment at this same resolution.  Note that I have had to use custom CSS nudging to get all elements within this section to look reasonably decent at 1920x1080 due to the frankly clunky nature of the current grid system's alignment.

I have only given mobile cursory adjustment so far - I know there are elements that are far out of order and alignment for the design I have created here.  Hopefully I can rearrange them, and define mobile-only CSS to create a decent layout.   All told, I feel like I spend way too much time trying to compensate for the system through custom CSS, so much so that I'm starting to wonder why I use the platform at all.