Margins on input boxes

Gravity Support Forums » Plugin Support » Gravity Forms

djadejones
Member
Hi Guys
I am just trying to reduce the size of the gap between my input fields, and in my css I have:
```
[css]
#left form {
	margin-left: 50px;
 }
#left input {
	margin-right: 20px;
	margin-bottom: 15px;
	padding: 3px;
}
#left label {
	width: 7em;
}
```
So I reduced the margin-bottom on the input from 15px to 5px and this has reduced the size on some forms but not others.
One form it did work on is this one:
http://www.primarycarecommunity.net/newlocum/
but 2 it didn't work on are on this page:
http://www.primarycarecommunity.net/vacancies/

Any help appreciated, thanks.
Posted 12 years ago on Tuesday September 13, 2011 | Permalink
Kevin Flahaut
Administrator
It appears that your styles are being applied in the second page.

screenshot: http://bit.ly/rlM9ws

The label width value is being overwritten, but you can be more specific with your CSS rule and that will help override the defaults.

The form may be inheriting other theme styles that are causing differences. I didn't really look that closely at that.

Also, a note here. You're using very generic style rules here that are ultimately going to cause you problems down the line. Not all inputs are created equal and I'm sure you're not expecting every radio button, checkbox and image button to all have the same margins as text inputs.

You're better off to specify the input type in your rule to avoid these pitfalls.. ex.
```
[css]
body #left .gform_wrapper input[type=text] {
     margin-left: 50px
}
```
You can find out the proper way to target the form fields for CSS manipulation here..

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

and here's a couple of good resources that discuss CSS specificity if you're not familiar with it

http://css-tricks.com/855-specifics-on-css-specificity/

http://www.htmldog.com/guides/cssadvanced/specificity/
Posted 12 years ago on Tuesday September 13, 2011 | Permalink