Why my widget has an extra padding on my Squarespace website

If you noticed unnecessary padding around your Elfsight widget after adding it to your website, don't worry, it doesn't mean that you did something wrong. The reason behind this is Fluid Engine, the drag-and-drop website editor recently introduced by Squarespace. This editor has its own peculiarities, and in some cases, it may cause extra space below your widget.

Fixing the issue with the help of CSS

The easiest way to fix the issue will be to use the following CSS code. All you need to do is add this code before the installation code of your widget and that's all:

<style>
  .disable_fluid_engine {
    grid-template-rows: unset !important;
  }
</style>

<script>
  window.addEventListener('load', () => {
    document.querySelectorAll("[class*='elfsight-app-']").forEach((item) => { item.closest(".fluid-engine")?.classList.add("disable_fluid_engine") })
  });
</script>

This is what it should look like:

<style>
  .disable_fluid_engine {
    grid-template-rows: unset !important;
  }
</style>

<script>
  window.addEventListener('load', () => {
    document.querySelectorAll("[class*='elfsight-app-']").forEach((item) => { item.closest(".fluid-engine")?.classList.add("disable_fluid_engine") })
  });
</script>
<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-e3dd080e-0e67-41ed-9e45-0e57b4de81b8" data-elfsight-app-lazy></div>

Well done! Extra paddings should no longer appear!

If you have more than one widget on a page, adding the code once will be enough. There is no need to add this CSS next to the installation code of each widget.

Removing paddings using Classic Editor

To fix this issue, you can also switch to the Classic Editor and reinstall the widget the way described below.

1

First, create a section by clicking Add Section in your website editor:

2

Next, you need to switch to the Classic Editor. You can do that by pressing Looking for sections built with our Classic Editor? in the Add a Section popup:

3

You will be redirected to the Classic Editor Settings where you need to click Add a blank section:

Due to the platform's peculiarities, it may take a while for a new section to appear. If it is taking too long, try clicking the Close button. The section should appear immediately after doing so.

4

To insert the installation code of your widget, please click on the plus sign and select the Code block:

5

Paste the installation code of the widget and make sure the Display Source Code option is turned off:

6

Now you can move to modifying the widget's height and width. You can do that through Edit Section → Format:

Done! If the widget's installed this way, no paddings will appear.