Change font size and line height « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Cara Jeanne
Member
This may seem very simple, I have searched through the forum and have tried several snippets.

I went back to the css guide and thought if I used .gform_wrapper that should cover everything, right? Well I used that to change the font which worked however I can't seem to change the line height. I tried using this:
```
.gform_wrapper{
    font-size: 12px;
}
.gfield{
    line-height: .5em;
}
```
Also, I have more than one form, how would I clarify specific styling? Thanks in advance.
http://nolabankruptcy.com/
(Form in widget on home page)
Posted 11 years ago on Thursday January 3, 2013 | Permalink
Chris Hajer
Key Master
Your rule need to be more specific so that is overrides and other rules which exist in the Gravity Forms forms.css or your theme's stylesheet. Using just one selector like that is not specific enough. Try this for the elements you want to target:
```
[css]
body .gform_wrapper_12 form $WHATEVER {
```
The additional selectors before your target element should make the rule specific enough so that it 'wins' over all other rules.

To apply styles to just one specific form, change gform_wrapper from a class to an ID:
```
[css]
/* this will apply to all forms */
/* class begins with . */
body .gform_wrapper form

/* this will apply to just form 12 */
/* ID begins with # */
body #gform_wrapper form
```
Posted 11 years ago on Thursday January 3, 2013 | Permalink
Cara Jeanne
Member
So if I want to change the line height between the lines of input on a form I would use:
```
[css]
/*this will apply to all forms */
body .gform_wrapper form .gfield {
   line-height: .5em;
}
```
Correct?
Posted 11 years ago on Thursday January 3, 2013 | Permalink
Cara Jeanne
Member

The above did not work :(

Posted 11 years ago on Thursday January 3, 2013 | Permalink
Kevin Flahaut
Administrator

Are you trying to change the line-height in the actual paragraph text inputs or just for the labels, descriptions, etc?

Posted 11 years ago on Friday January 4, 2013 | Permalink
Cara Jeanne
Member

I have a simple form for name, email and paragraph text. I want to reduce the space between each of those inputs. Overall, I want the form to look smaller - make sense?

Posted 11 years ago on Friday January 4, 2013 | Permalink

Then you would need something like this.. adjusting margins as well.

[css]
body #gform_wrapper_2 .top_label .gfield_label {
    margin: 0 0 4px 0 !important;
    line-height: 1em !important;
}

body #gform_wrapper_2.gform_wrapper li,
body #gform_wrapper_2.gform_wrapper form li {
	margin: 0 !important;
}

My test: http://i.imgur.com/O9ySt.jpg

You should be able to tweak things from there.

Posted 11 years ago on Friday January 4, 2013 | Permalink

Cara Jeanne
Member

Thanks for your help, it looks great.

I really don't want to just copy and paste and move on. Just so I understand, the margins were needed for each field, it would not have worked by only adjusting the line height?

Posted 11 years ago on Friday January 4, 2013 | Permalink
Kevin Flahaut
Administrator

There was a top margin of 10px defined for each label. We needed to re-define the top margin to zero to make it more compact.. hence the first margin declaration. Line height would have accomplished part of what you wanted, but not everything.

Posted 11 years ago on Friday January 4, 2013 | Permalink
Cara Jeanne
Member

Thanks for the clarification. I am using Genesis for most of my sites and often create simple feedback forms so I am sure I will need to use this often and I wanted to understand. Have a nice day.

Posted 11 years ago on Friday January 4, 2013 | Permalink
Kevin Flahaut
Administrator

I'm glad I could help out. Good luck with your projects.

Posted 11 years ago on Friday January 4, 2013 | Permalink

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