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.

Styling the Widget

  1. So I've searched the forums, documentation and FAQs, but am still baffled as to how to change the formatting within the Gravity Form widget on this page: http://drmichellecleere.com/

    I'm running into two issues:

    1. Alignment/padding: the form elements are indented. I've tried monkeying with the CSS for the gravity widget, but nothing seems to work. Clearly I'm missing something.

    2. The text entry fields are really short. Is there an easy way to stack the Name fields on top of each other rather than have them appear on one line, which makes for small entry fields? And would that increase the size of the Email entry field as well?

    Many thanks from a CSS-challenged person.

    Posted 9 years ago on Thursday November 10, 2011 | Permalink
  2. Try this out:

    [css]
    #gform_wrapper_5 ul {
    padding: 0;
    }
    #field_5_2 {
    width: 570px;
    }

    Your theme is setting padding on the ul's in the sidebar. For the name, you can use the "simple" format in the field options in the formbuilder tool so it just shows one line. Then you can target that field's ID width as well in the CSS.

    Posted 9 years ago on Thursday November 10, 2011 | Permalink
  3. Thanks, Rob. This is a big help. I can see where I went wrong. Was attempting to style gform_widget rather than gform_wrapper. I took a look at Firebug and understand exactly what you did. Thanks so much!

    p.s. am digging into the CSS tutorials to which the FAQ links. Thanks for pointing to that resource.

    Posted 9 years ago on Thursday November 10, 2011 | Permalink
  4. You got it, glad to help! Let me know if you run into any snags. :)

    Posted 9 years ago on Thursday November 10, 2011 | Permalink

This topic has been resolved and has been closed to new replies.