How to separate form blocks response areas/cells

Out of nowhere my form blocks in my inquiry page are now touching each other. There are no longer gaps in between the blocks, How can I fix this? Thank you, any help is appreciated. 

Here's a link to my inquiry page: https://www.christerdabu.com/inquire

You mean add a spacing here?

On 5/6/2023 at 12:23 AM, tuanphan said:

You mean add a spacing here?

@tuanphan

Yes! That's what I'm trying to figure out

On 5/4/2023 at 6:24 PM, christerdabu said:

Out of nowhere my form blocks in my inquiry page are now touching each other. There are no longer gaps in between the blocks, How can I fix this?

This has happened because Squarespace engineers rolled out a new Form Block in May 2023. This new Form Block has different markup and has been restyled. Anyone using custom CSS (like you have added to show fields next to one another) needs to update their CSS to make it compatible with the new form.

Specifically, you'll want to add some margin to the fields that you're placing side-by-side. For example, to add 4 pixels of right-margin, you could use something like this:

.form-wrapper .react-form-contents .field-list .field {
  margin: 0 4px 18px;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

On 5/19/2023 at 1:25 AM, paul2009 said:

This has happened because Squarespace engineers rolled out a new Form Block in May 2023. This new Form Block has different markup and has been restyled. Anyone using custom CSS (like you have added to show fields next to one another) needs to update their CSS to make it compatible with the new form.

Specifically, you'll want to add some margin to the fields that you're placing side-by-side. For example, to add 4 pixels of right-margin, you could use something like this:

.form-wrapper .react-form-contents .field-list .field {
  margin: 0 4px 18px;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

So I tried this and it worked, but after refreshing the page a few times it goes back to no spacing.

It appears SS is sneaking in a CSS file after your custom CSS which is overriding your CSS. As a temporary fix add !important to the declaration.

margin : 0 4px 18px !important;

Let us know how it goes.

Hello,

I recently just noticed that the gap disappeared again. There's no spacing in my inquiry form again.

It's weird because when I'm viewing my website online there's no gap

but when I'm on the custom CSS page in squarespace there is a gap.

Can someone help me put the gap between the fields permanently? Thank you

On 9/11/2023 at 5:16 AM, christerdabu said:

Hello,

I recently just noticed that the gap disappeared again. There's no spacing in my inquiry form again.

It's weird because when I'm viewing my website online there's no gap

 

but when I'm on the custom CSS page in squarespace there is a gap.

 

Can someone help me put the gap between the fields permanently? Thank you

In bottom of CSS code, find this

.form-wrapper .react-form-contents .field-list .field {
    margin: 0 6px 18px
}

change it to

.form-wrapper .react-form-contents .field-list .field {
    margin: 0 3px 18px !important;
}