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.

How to get the checkboxes closer to each other?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. msweber
    Member

    Hello,

    I have a gravity form on the right hand side on my website:
    http://www.lasikistanbul.net/

    I have put some checkboxes in the form. I want to have the checkboxes closer to each other with almost no space between the boxes.

    Secondly, I would like to decrease the space between the title (Mehr Infos) and the checkbox-list below.
    Can you help me out?

    thanks

    Posted 13 years ago on Monday February 6, 2012 | Permalink

  2. Rob Harrell
    Member

    Looks like in your style.css you have:

    [css]
body #gform_wrapper_5 .gform_body .gform_fields .gfield .gfield_checkbox {
list-style-type: none;
list-style-image: none;
color: white;
line-height: 30px;
font-size: 0.9em;
}
    Copy

    If you get rid of that line-height your checkbox fields will come closer together. Then you also have this style (I added the margin-left: 0) at the bottom, so you would just need to update that:

    [css]
body #gform_wrapper_5 .gform_body .gform_fields {
list-style: none;
list-style: none;
list-style-position: inside;
margin-bottom: 3px;
display: inline;
margin-left: 0;
}
    Copy

    Making these adjustments worked for me in Chrome Dev Tools. Hope this helps out.

    Posted 13 years ago on Monday February 6, 2012 | Permalink

  3. msweber
    Member

    thanks, that did the trick in the small form

    but here I have another form
    http://www.lasikistanbul.net/lasik-eignungstest

    And again I want to get the checkboxes closer to each other. But in the css I could not find a line-height which I could remove.

    Thanks again for your great support...

    Posted 13 years ago on Tuesday February 7, 2012 | Permalink

  4. Rob Harrell
    Member

    Looks like this margin is causing the current spacing:

    [css]
body #gform_wrapper_7 ul li {
margin-top: 10px;
}
    Copy

    If you add this in:

    [css]
body #gform_wrapper_7 ul.gfield_checkbox li {
margin-top: 0;
}
    Copy

    It should void the other margin.

    Posted 13 years ago on Tuesday February 7, 2012 | Permalink