PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Gravity Forms Styling Messed Up on Woo Theme Coffee Break

  1. 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 6 years ago on Friday February 8, 2013 | Permalink
  2. 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 6 years ago on Friday February 8, 2013 | Permalink