Jump to content

Fix Fluid Engine Negative Space

Recommended Posts

Fix Negative Space between Text Blocks/Images/Videos & Carousels – Mobile Only!

I'm experiencing an issue/bug with Fluid Engine, mobile-only where it is adding excessive padding/space after a text block. It forces any image block, video block, or carousel block to be positioned further down the viewport than desired. 

I have also found an issue with Acuity Scheduling blocks adding excessive padding, not all blocks but at least one per page of multiple (3x) summary blocks. I have managed to target these and set a max-height via CSS, not ideal but does the trick for now.

It previews fine in the Squarespace Mobile Edit/Preview window but once published/saved live the extra padding is added (see attached screen grab examples for visual reference)

I have reviewed a few similar threads on this subject on the Squarespace Forum but none seem to give me a solution or answer to fix the bug. I have tried targeting the offending blocks via block-id's but still no joy. Changing the display flex-direction pushes the problem up the viewport.

It seems to be a wider problem with Fluid Engine's, responsive baseline grid/framework, I'm no expert but I cannot see why it is site-wide and affects so many page elements.

Any help would be much appreciated at this stage as I have exhausted my knowledge of workarounds via Custom CSS.

Many thanks,

Jon

Screenshot 2024-04-30 at 14.20.47.png

Screenshot 2024-04-30 at 14.20.55.png

Screenshot 2024-04-30 at 14.21.55.png

Screenshot 2024-04-30 at 14.22.03.png

Screenshot 2024-04-30 at 14.22.19.png

Screenshot 2024-04-30 at 14.22.53.png

Edited by hellostudiojohn
Link to comment
  • hellostudiojohn changed the title to Fix Fluid Engine Negative Space
  • Replies 0
  • Views 359
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.