[ninanevski]

Hi,

I have been going back and forth with the gravity forms support team to center my gravity forms optin form. They say that the theme isn’t allowing the form to be centered. Can you please help me with this?

This is what they told me:
Looking at your newly updated form, you’ve still got a block of CSS coming from your theme that is messing with the Gravity Forms styles, it’s in a /gravity/ directory but it’s not from us:
@media only screen and (min-width: 641px)
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
width: calc(50% – 8px);
}

If you change that odd Width calculation to 100%, it displays your form correctly with the fields spread out to their full-width (what they look like on mobile) and the button is properly centered below them.

@media only screen and (min-width: 641px)
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
width: 100%;
}

Thanks,
Nina

[Juanfra Aldasoro]

Hi Nina,

Thank you for writing.

We add some styles to enhance compatibility for gravity forms.

You can get the code they suggested into your custom CSS and from what they say, that will fix your issue.

Best,
Juan.

[ninanevski]

Hi,

I inserted what they suggested into my child-theme css and it didn’t seem to change anything. Please help.

Here is the page I’m trying to correct: https://www.worshippianotutorials.com/gravity/

[Juanfra Aldasoro]

Hi,

Would you please try with this CSS:

.gform_wrapper form[id^="gform_"] li.gfield input[type="text"], .gform_wrapper form[id^="gform_"] li.gfield input[type="email"], .gform_wrapper form[id^="gform_"] li.gfield input[type="password"], .gform_wrapper form[id^="gform_"] li.gfield select {
    width: 100%;
}

Best,
Juan

[ninanevski]

I wrote the ID after the underscore like this:

.gform_wrapper form[id^=”gform_2″] li.gfield input[type=”text”], .gform_wrapper form[id^=”gform_2″] li.gfield input[type=”email”], .gform_wrapper form[id^=”gform_2″] li.gfield input[type=”password”], .gform_wrapper form[id^=”gform_2″] li.gfield select {
width: 100%;
}

Is that correct?

Also, if I need to do this for multiple forms, should I separate IDs by commas? Like this?: .gform_wrapper form[id^=”gform_2,3″]

[ninanevski]

I inserted With form ID and without and didn’t see any change.

[ninanevski]

Looks like it’s working now actually.

[Juanfra Aldasoro]

Thanks for the follow-up! I’m glad to hear that.

Best,
Juan.