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

Get Help
,
1

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.

https://drive.google.com/file/d/1X_nU7YIk53Oc_g5Zfar9V0rNftsstFl4/view?usp=share_link

https://drive.google.com/file/d/1o2E9kVjKGvtk2xzV527L0h08G6tZVZhg/view?usp=share_link

2

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.

3

Sure.

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

Thank you.

4

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;
}
5

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
6

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