Enable Before-After Widget to Take Up Full Space of Embed Box on Squarespace

Ask the Community Customization
1

  • Issue description:
    I have a three-image before/after slider embedded in a Squarespace Embed Block. On various screen sizes, there’s inconsistent spacing, sometimes extra space appears above, below, or both and the slider doesn’t seem to occupy the full height of its container. Ideally, it should match the height of the adjacent black box with text. From what I can tell, the widget isn’t scaling vertically with the Embed Block. I’d appreciate it if someone could take a look across different viewport sizes to confirm and suggest a fix.

  • Link to the page with the widget in question:
    Home Theater | Houston Home Theater Installation — Commercial Light & Magic

1 Like
3

Hi there and welcome to the Community, @Dan_Dearwater :waving_hand:

Here is how it looks on my end:

image
image1076×982 85 KB


Would you like to completely remove all spacings between the sets, or just the bigger on, at the bottom?

4

Hello Max, and thank you! The spacing between the sets is fine, I just want the spacing on top and bottom to be removed.

1 Like
5

Got it, thanks!

There is no spacing at the top on my end. Could you please send me a screenshot of how it looks for you?

6

It depends on the viewport size, for instance this is an iPad air.

Screenshot 2025-04-24 094022
Screenshot 2025-04-24 0940221014×1346 92.5 KB

1 Like
7

Thank you!

We’re not sure if it’s feasible, but the devs will try to come up with a solution. I’ll update you once I have any news :slightly_smiling_face:

1 Like
8

Okay, thanks Max.

1 Like
9

Thank you for waiting!

You can use this code in the Custom CSS field on the Style tab of your widget’s settings:

[class*='LayoutList__Container-sc'] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.global-styles,
.sqs-block-content:has([class*='elfsight-app']),
.elfsight-app-94bf7847-2a8e-436a-b76c-a45043ea6b57,
.es-embed-root {
  height: 100% !important;
}

[class*='Widget__Container-sc'],
[class*='Widget__Inner-sc'],
[class*='Widget__Content-sc'] {
  height: 100%;
}

The top and bottom spacings won’t appear anymore, but the spacing between the slider sets will be increased. This is the only possible solution here:

image
image574×826 125 KB


If you have any questions left, I’ll be happy to help :wink: