Form alignment issues « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

claykitchens
Member

My form is out alignment on this site - http://alpinecoc.org/contact-us/prayer-request/
The form style that I would like to have is here - http://mollermarketing.com/blogging-progress-report/

I've searched the forums and found a topic that addresses my issue, but didn't offer a solution -http://www.gravityhelp.com/forums/topic/why-is-the-formatting-off-alignment. I also looked at the topic that refers to the CSS Ready Classes, but it doesn't appear to have the right solution for me.

I would like to have the form labels placed above the fields, but when I select that from the form settings, it doesn't appear to properly align them. I'm new to Gravity Forms and still fresh into CSS, so I'm not able to find the solution. We're using WooThemes Empire theme. All help is greatly appreciated!!!

Posted 12 years ago on Monday January 30, 2012 | Permalink

Your theme's CSS has gravity forms styles in it that are telling the labels to float left, which is why they are showing on the left:

[css]
.gform_wrapper .top_label .gfield_label {
display: block;
float: left;
padding-right: 20px;
width: 100px;
margin: 5px 0px 4px !important;
}

This margin is causing your radio fields to indent as well:

[css]
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {
margin-left: 120px !important;
}

So you can edit those by dropping this in place of them:

[css]
.gform_wrapper .top_label .gfield_label {
display: block;
margin: 5px 0px 4px !important;
}
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {}

Posted 12 years ago on Monday January 30, 2012 | Permalink

claykitchens
Member

Thank you for your quick reply!

It's almost as if there's something else preventing those CSS changes...

I copied your code and pasted it into the custom.css file and refreshed, but there were no changes. So, I removed the code from custom.css and made the change to the actual forms.css with Coda. Still no change in the alignment after a refresh. Either I'm editing the wrong portion of the code in the forms.css, or something is preventing it from changing.

Posted 12 years ago on Monday January 30, 2012 | Permalink
Rob Harrell
Member
Ah ok, just an fyi - you don't want to edit forms.css in the plugin folder. So, since you are placing these in custom.css we will need to do overwrites. Try this out:
```
[css]
.gform_wrapper .top_label .gfield_label {
float: none !important;
padding-right: 0 !important;
width: auto !important;
}
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {
margin-left: 0 !important;
}
```
Posted 12 years ago on Monday January 30, 2012 | Permalink
claykitchens
Member

That's it! Thank you!

Now, it look looks like the gform_body needs to be widened to allow the description to span across the page. I've tried a couple of edits to widen it to 99.8%, but the attempts have been unsuccessful. Would you please point me in the right direction?

Posted 12 years ago on Monday January 30, 2012 | Permalink
Rob Harrell
Member
It looks like this page is not a full-width layout, it seems as though it could be columned. In your theme's css there is:
```
[css]
#main, .home.page #main {
width: 620px;
padding: 3em 0 3em;
}
```
It's setting that area to only be 620px wide. So your form description will align to that width. However, the description under the name - you can change this in your custom.css (rule you already have in place, we are just adding a width property):
```
[css]
.gform_wrapper .gfield_description {
padding: 0;
width: auto;
}
```
Posted 12 years ago on Monday January 30, 2012 | Permalink
claykitchens
Member

I would have never believed that I could receive a solution in this short amount of time. I can't thank you enough for your help and quick response time!!! Now I know why Gravity Forms is highly recommended! great product + great support

Posted 12 years ago on Monday January 30, 2012 | Permalink
Rob Harrell
Member

Awesome, glad to help out! And thanks for the kinds words too. :)

Posted 12 years ago on Monday January 30, 2012 | Permalink

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