Constrain Submit Button Size

Get Help
, ,
1

I need to alter the size of my submit button, which is a text button, so that it matches the size of the fields in my form, and also resizes properly on mobile devices.

https://apply.leadershiprockland.org/

2

Checking your page I can see that your theme style.css is already tweaking the max-width CSS property for several form elements, including the form footer (where the submit button “lives”) and the submit button itself. This is just what I saw at first look, I’m sure there are more theme CSS customizing the form styles. Bear in mind that your form is just part of the page content, therefore affected by your theme styling.

So I would recommend to approach this from the theme side of things, contacting your theme developer to avoid it from tweaking the form footer and/or submit button, rather than trying to add more CSS to override what your theme is already overriding.

3

I don’t think I can contact the developer - this is the standard WP 2021 theme. So you are saying there isn’t a way to tweak this?

Dan

4

There is a way to tweak it. But @sacom’s suggestion was to undo what is making it like this currently, rather than try to layer on more CSS to override it. There are some Gravity Forms specific styles being applied, which is what is doing this. This theme started out as Twenty Twentyone, but it has been customized with additional CSS to make it look the way it does, which is what is fouling your buttons (because of the styles applied to the form footer.)

If you test the form with an unmodified theme, like Twenty Twenty, you will see the form styles as they were intended, and can add CSS to change the button further, but at this point it would be a mess to try and add CSS to fix CSS that was deliberately added which makes it look like this.

5

Now I’m super confused. The only CSS I applied was to center the form - that CSS came from your help pages, and some to constrain the size of the text fields. Yet that is “fouling” my buttons?

Dan

6

Hi Dan. In this section where you added your own CSS:

body #gform_wrapper_1 .gform_footer .gform_button,
body #gform_wrapper_1 .gform_page_footer .gform_button,
body #gform_wrapper_1 .gform_page_footer .gform_previous_button,
body #gform_wrapper_1 .gform_page_footer .gform_next_button {
 border-style: solid;
 color:#ffffff;
 background-color:#f8b935;
 border-width: 0px;
}

Add this line:

 width: 400px;

So it looks like this:

body #gform_wrapper_1 .gform_footer .gform_button,
body #gform_wrapper_1 .gform_page_footer .gform_button,
body #gform_wrapper_1 .gform_page_footer .gform_previous_button,
body #gform_wrapper_1 .gform_page_footer .gform_next_button {
 border-style: solid;
 color:#ffffff;
 background-color:#f8b935;
 border-width: 0px;
 width: 400px;
}

The inputs in the form above are using that same width rule, so that should make the submit button the same size on this form. If you have any other questions, please let us know.

7

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