Gravity Forms Styling Messed Up on Woo Theme Coffee Break

Gravity Support Forums » Plugin Support » Gravity Forms

TechTools
Member

I have installed Gravity forms and created a form on the following site and the form fields are hidden behind the right side bar which is overlapping. In addition the labels are being limited to 120 px. wide, while the input areas are too wide.

http://www.professionalpunch.com/new-client-consultation-form/

I used the inspect tool and cannot find any simple css fix to this. Any suggestions? Unfortunately a similar thing happened on another client site who was using Genesis Magazine and I ended up just using another form plugin. (I didn't like doing that, I don't like "cheating" on gravity forms) :-D But I had to. Any help you can give is greatly appreciated!

Posted 11 years ago on Friday February 8, 2013 | Permalink
Kevin Flahaut
Administrator
The problem is coming from your theme's stylesheet. It's not a Gravity Forms problem per-se, it's theme styling that's the issue.

Line 315 of your theme's style.css file sets a padding rule that's causing the visibility problem.
```
[css]
.gform_wrapper input { padding: 7px 3px !important; }
```
style.css line 314 - 316 appear to be the main issues.. If you disable those you'll see that it displays properly.. at least it fits horizontally and you're labels aren't squashed to the left.

screenshot: http://i.imgur.com/2s1y3w3.jpg

You also have the "top label" option set but the theme overrides this and forces a left label layout. That's also causing some of your problem and it's a common complaint with the Woo Theme's. You can hit up their support team for tips on how to best override their custom theme styles.
Posted 11 years ago on Friday February 8, 2013 | Permalink