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.

Change font size and line height

  1. 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 7 years ago on Thursday January 3, 2013 | Permalink
  2. 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 7 years ago on Thursday January 3, 2013 | Permalink
  3. 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 7 years ago on Thursday January 3, 2013 | Permalink
  4. Cara Jeanne
    Member

    The above did not work :(

    Posted 7 years ago on Thursday January 3, 2013 | Permalink
  5. Are you trying to change the line-height in the actual paragraph text inputs or just for the labels, descriptions, etc?

    Posted 7 years ago on Friday January 4, 2013 | Permalink
  6. 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 7 years ago on Friday January 4, 2013 | Permalink
  7. 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 7 years ago on Friday January 4, 2013 | Permalink
  8. 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 7 years ago on Friday January 4, 2013 | Permalink
  9. 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 7 years ago on Friday January 4, 2013 | Permalink
  10. 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 7 years ago on Friday January 4, 2013 | Permalink
  11. I'm glad I could help out. Good luck with your projects.

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

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