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

  • Profile Image
    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.

  • Profile Image
    TitusN
    Answered on September 24, 2014 at 03: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: 

    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. 

  • Profile Image
    SteveSoler
    Answered on September 24, 2014 at 05:49 AM

    Worked great! Thanks!