Have you come across this issue before?

When you’re adding a third-party widget that includes a script inside a Code Block, and even when the actual content of the element is fairly short, a HUMONGOUS gap is left behind whenever you save the changes?

Wanna fix that?

Then today’s video is for you my friend!

Take a look at how we can use a very sneaky CSS trick in order to make sure the problem stops happening, when you’re working with a 7.1 Fluid Engine section.

Note: the solution I’ll be sharing with you works like a charm but it’s pretty “hacky”. So, whenever possible, try going with the more targeted snippet that includes the specific block ID, to avoid making the change global when it isn’t necessary.

The CSS trick itself is fairly simple so you can dive right into that timestamp if you want, but I highly suggest checking out the explanation of WHY that is necessary in the first place, to get a better sense of how FE works:

1. 00:00 - Intro

2. 00:43 - Overview of the problem

   First, we’ll take a couple of minutes to dive into the reason why Code Blocks with scripts behave in this odd way in Fluid Engine, creating unsightly (and incredibly stubborn) gaps that can sometimes make it difficult for us to place the rest of the content below them in a neatly spaced way.

3. 05:28 - Implementing the CSS trick fix

   After that “aha” moment, we’ll begin our Inspect Element tool search to look for the corresponding element(s) we need to take care of to be able to get rid of the problem. No spoilers here, you have to watch the vid to know what I’m referring to!

4. 8:31 - Final magical touch

   With our CSS implemented, we’ll now be able to enjoy a completely gapless code block that sits seamlessly above the following element in our section!

How about that?! Easier than you thought, wasn’t it?

Hope you found it helpful!

Until next time,

B.

(Recommended) Specific block approach

Global approach