Styling the Widget « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

sticklechick
Member

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: [DEAD LINK]

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 12 years ago on Thursday November 10, 2011 | Permalink
Rob Harrell
Member
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 12 years ago on Thursday November 10, 2011 | Permalink
sticklechick
Member

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 12 years ago on Thursday November 10, 2011 | Permalink
Rob Harrell
Member

You got it, glad to help! Let me know if you run into any snags. :)

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

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