How to decrease the space before just one field in a form? [RESOLVED]

Hello,

I created one tick box under a consent field and I want the tick box field to be closer to the consent field. How can I decrease the space between both?

Hi Maria.

Can you share a link to where your form is displaying?

Decreasing the space between the policy acceptance fields checkboxes should be doable with a bit of CSS.

Hi,

Here is the link: Webinar gratuito- Encuentra trabajo como profesor de español - Certificado ELE

I added the form to the page with a shortcode.
If I have to add a css, I suppose it would be to that page and/or to the gravity form?

Thanks in advance,

Maria

Hi Maria.

Were you able to fix this? The fields are rendering with a shorter space on my end:

Something else that comes to mind is the rendering on different browsers.

Well, I haven’t done anything.
I tried google chrome and there is some space between the two tick boxes, but in firefox is like you see itm much better.
Maybe I should leave it like this.

Thanks anyway Juan!

Hello Juan,

I know what happened. It was the caché. If you go now, you can see the space between the two tick boxes, because you were seeing the earlier version that dind’t work out.
Now I have a consent field and a tick box that I want to look like the picture you showed me.

Regards,

Maria

Hi Maria.

I see it now.

Try this CSS snippet:

.page-id-2433 .gform_wrapper.gravity-theme .gform_fields{

     grid-row-gap:unset;

}

The code should go in Appearance > Customize > Additional CSS on your WordPress admin or your preferred code snippets plugin.

Please note the .page-id-2433 class will ensure that the code only executes on the specific page where you added the form.

Try it and let me know how it goes.

Hi Juan,

I tried but then, all the spaces before every field is shorter, not just this one.
I just want this one, the last tick box that is under the gdpr field, to be closer to the one above.

Regards,

Maria

Hi Maria,

This is a tricky one because the element uses CSS Grid.

The grid-row-gap property adds space to every element. There is no way to remove the row gap for one specific row with CSS Grid.

The most straightforward workaround is to apply a negative margin like this:

fieldset#field_13_10{

margin-top: -25px; /* Feel free to play with the value as needed */

}

Hi Maria,
Juan has suggested a good trick. You can try his solution, or if you prefer to remove spacing from above and below the last checkbox, you can try the following CSS.

:arrow_up: Before:

:arrow_down: After:

:white_check_mark: Updated CSS code:

#field_13_9.gfield--type-consent .ginput_container_consent {
  margin-top: 20px !important;
}

#field_13_10.gfield--type-checkbox,
#field_13_11.gfield--type-html {
  margin-top: -25px !important;
}

Give it a try, and let me know how that goes! :smile:

Thank you very much Faisal, it worked!!
Now it looks like I wanted.

Thanks again,

Regards,

María

Thanks a lot Juan,

I implemented the Faisal’s option and it worked.
Yours was also a good choice.

Regards,

Maria

You’re welcome, Maria.

Great to hear that the issue has been resolved! If you require any additional assistance in the future, please do not hesitate to open a new ticket. :smile:

Thank you! :+1: