Man, I need help. Spacing between checkboxes is too big

Hi everyone,

For some reason my checkboxes are populating onto my live page with extreme gaps in between.

It shows up perfectly in the preview, though.

Please help.

Screenshots are attached.

Hi Steve. If it looks OK in the form preview but not on the front end, your theme or a plugin is adding some styles to make it look like that. Can you share a link to the page on your site where we can see the form? Thank you.


It’s Schedule Your Home Inspection | Bulldog Professional Inspection Services

Thank you.

Hi Steve. There is some inline CSS that is adding these styles to the page:

input[type="checkbox"] + label, input[type="radio"] + label {
    margin: 0 0 0 .3819820591em;
    padding: 20px; 

It’s the padding: 20px that is doing this. If you remove this rule, the checkboxes will look like this: Screenshot on 2023-03-10 at 16-02-01.png - Droplr

If you’re not able to find where that rule is added, you can override that for Gravity Forms checkboxes using this CSS:

body .gform_wrapper input[type="checkbox"] + label,
body .gform_wrapper input[type="radio"] + label {
    padding: 0!important;

Wow. Thanks, Chris. That was quick.

I’m assuming it’s somewhere on the page so I’ll look for it. Your help is greatly appreciated. :pray:t4:

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.