Why my widget has extra padding on my Squarespace website

If you notice extra padding around your Elfsight widget after adding it to your website, it’s usually caused by Squarespace’s Fluid Engine editor. This editor can sometimes add extra space below the widget, but it’s easy to fix. Here’s how:

Fixing the Issue with CSS

The simplest way to fix this issue is by adding custom CSS to your widget's settings. Follow the steps below:

1

Open your Elfsight Dashboard, find the widget installed on your webpage, and click Edit:

2

Go to Style / Appearance or Settings tab and find the Custom CSS section:

3

Add this code to the Custom CSS input field and Publish the changes:

.global-styles,
.fluid-engine:has([class*='elfsight-app']) {
  grid-template-rows: unset !important;
}

Done! The extra padding should now be gone.

Removing Padding Using Classic Editor

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

1

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

2

Next, you'll need to switch to the Classic Editor. You can do this 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. Click Add a blank section:

Because of the platform’s specifics, a new section may take a moment to appear. If it takes too long, click the Close button — the section should show up immediately after that.

4

To insert the installation code of your widget, please click on the Plus sign (+) and select the Code block:

5

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

6

Now you can adjust the widget's height and width. To do this, go to Edit Section → Format:

That's it! 🚀 If the widget is installed this way, no extra padding will appear.

Still seeing extra padding? Contact our Support team and share a link to your page — we’ll be happy to help! 🤗