How to decrease the space between two fields on the same line Using CSS

  • SteveSoler
    Asked on September 23, 2014 at 11:02 PM

    When using the Shrink option on two fields to place them side by side on one line, is there any CSS that will allow us to decrease the space between the two fields to bring them closer to each other?

    I'm thinking about doing this on a new form I'm creating called Contact Us. I want to bring the City and State fields closer together. 

    Thanks.

  • TitusN
    Replied on September 24, 2014 at 3:55 AM

    Hello, 

    I'm pretty sure you are referring to this form: http://www.jotform.us/42658471433155

    Yes - you can reduce the padding CSS property which is responsible for pushing the two fields apart: 

    How to decrease the space between two fields on the same line Using CSS Image 1 Screenshot 20

    To do that - you need to add some CSS to your form using this guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can use the CSS below to reduce the spacing between the two fields - feel free to play around with the px value (highlighted green) to adjust the distance between the fields. 

    /*Reduce the left padding of the State Field*/

    li#id_13 {

    padding-left: 0px;

    }

    /*Reduce the right padding of the Country Field*/

    li#id_4 {

    padding-right: 5px;

    }

    Did that help? 

    Let us know. 

  • SteveSoler
    Replied on September 24, 2014 at 5:49 AM

    Worked great! Thanks!