Docs

[Greg W]

There is a CSS conflict (overwrite) issue with X and Gravity Forms.

I simply need a balanced 2 column layout.

GF CSS Ready Classes: gf_left_half + gf_right_half.

Please see my dev page and assist with a fix.

http://lappetitopizza.com/shop/lappetito-2/appetizers/
(WooCommerce Single Product Page w/ Gravity Form)

WordPress 4.5.3
X Theme 4.6.1
WooCommerce 2.6.4
Gravity Forms 1.9.17.6

[Rahul]

Hey There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Greg W]

This reply has been marked as private.

[Friech]

Hi There,

Thanks for the credentials and sorry you’re having this issue. Please follow this post: https://community.theme.co/forums/topic/gravity-forms-layout-css-issues/#post-1086168

Hope it helps, Cheers!

[Greg W]

Doesn’t help.

Right column doesn’t respond correctly.

Why did you ask for credentials and then send me a link?

I’m missing something in CSS and I can’t put my finger on it. Plz look again.

[Lely]

Hi There,

Please add this custom CSS:

body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_right_half, body .gform_wrapper .top_label li.gfield.gf_left_third, body .gform_wrapper .top_label li.gfield.gf_middle_third, body .gform_wrapper .top_label li.gfield.gf_right_third {
    float: none !important;
}
body .gform_wrapper .top_label li.gfield.gf_left_half, body .gform_wrapper .top_label li.gfield.gf_left_third, body .gform_wrapper .top_label li.gfield.gf_middle_third {
    margin-right: initial;
}

Then remove the following from your current custom CSS:

body .gform_wrapper .top_label li.gfield.gf_left_half+.gform_footer, body .gform_wrapper .top_label li.gfield.gf_left_half+li.gfield, body .gform_wrapper .top_label li.gfield.gf_right_half+.gform_footer, body .gform_wrapper .top_label li.gfield.gf_right_half+li.gfield {
    float: left !important;
    margin-top: -1em !important;
}

Result:

[Greg W]

This is the desired 2-column layout. I’m almost there… plz assist.

[Lely]

Hello Greg,

If you will give us a screenshot on how you want it to display we would be happy to help and check further. But based on your current setup/structure that what we came up with.

Cheers!

[Greg W]

This is the desired 2-column layout. I’m almost there… plz assist.

[Rad]

Hi Greg,

Hmm, that would be tricky. It’s not aligned because titles and prices belong to different items. Example,

<ul>
<li>title</li>
<li>price</li>
<li>title</li>
<li>price</li>
<li>title</li>
<li>price</li>
</ul>

Which means each title and prices has their own respective columns independent to the title. Plus, there are items that are hidden which mean the column counts is greatly affected.

I tried but it won’t align, how about using different form plugin? GF form structure is really different now, and it greatly affect the styling and class names.

Thanks!

[Greg W]

I guess GF time has come and gone… too much bullsh**t (css, ui, wpadmin warnings, etc).

Thanks Rad… for stopping the bleeding. I spent too much time (AGAIN) on custom page layouts w/ GF… it’s embarrassing, frustrating, and expensive.

Please note my vote for a future X partnership with a modern form provider.

-Greg
https://WiseWebDesignStudio.com

[Christian]

You’re welcome. And, thanks for your feedback.

[Author]

Posts