Alignment issues with Gravity forms

Support
#1

Hi,

I am using the Pro theme and have a simple gravity form on the homepage. However, I am not able to center the form no matter what I try. I reached out to Gravity Forms and their tech said that this theme a lot of weird floats which are causing the issue.

I have also tried to strip Pro gravity forms styles with this in my child theme’s functions.php:

add_action(‘init’, ‘no_x_gravity_form_css’, 9999999);
function no_x_gravity_form_css () {
wp_dequeue_style( ‘x-gravity-forms’ );
}

I have been using Gravy Forms for 4 years now and never had an issue centering a form with any theme. Can someone take a look?

#2

My demo site url is below as well as login creds:

P.S. One other issue could not resolve related to this was being able to use ready classes to make both form fields show up on the same line. I had to add the following to make that work. I am sure this is all part of the same issue:

body .gform_wrapper .top_label li.gfield.gf_right_half {
float: none !important;
}

#3

Hello There,

Thanks for writing in! X theme supports gravity forms. We do have our own default Gravity form styling. The problem is that you added the from in a fullwidth column which of course makes the form fullwidth. Unless otherwise you added a maximum width for the form, it will stay at the center. To resolve your issue, please remove you custom code first and let X Gravity form styling be the one to correct the alignments. To make sure that it stays at the center, please edit the page and insert an inline css max-width: 420px; for the text element which you have inserted the form shortcode and do not forget to set the left and right margin of the text element to auto. If the margin is set to zero, it will always be left align.

If nothing works for you, please give us access to your site and clarify how wide you want the form to display so that we can help you fix it.

Best Regards.

#4

Hi,

It still doesn’t work. I have provided site login in the message above. Can you please take a look?

#5

Hi there,

You seem to not have followed the previous suggestion given. Kindly do the following:

1. Remove the code added in the functions.php file.
2. Remove this code as well added in the custom CSS:

.gform_wrapper .top_label li.gfield.gf_left_half, .gform_wrapper .top_label li.gfield.gf_right_half {  
    width:30%!important;
    margin: 0!important;
}

3. Go to Pro builder and set the width and max-width of the form to 450px, or any value that will be the width of the entire form.

4. Set the left and right margin to auto.

Hope this helps.

#6

Hi There,

I have corrected your GF CSS

Actually to have a form inline you need to follow this:

I have done that for you already for you.

Please follow the steps provided by Jade.

If that does not help, you can add the following CSS to Theme Options CSS

@media only screen and (min-width: 641px) {
.gform_wrapper form.gf_simple_horizontal div.gform_body {
    width: 100%;
}

.el96.x-text {
    max-width: 40%;
  margin: auto;
}
}

Hope it helps

#7

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