How to decrease margin space between the headings of my form?

  • Profile Image
    RogerYelvington01
    Asked on April 13, 2015 at 03:48 AM
    2.  I would like to decrease the margin space between the headings "Employees, Trainers, Class Instructors" and the configurable list table below each one to reduce waste white space.
  • Profile Image
    Charlie
    Answered on April 13, 2015 at 04:32 AM

    Hi,

    I've added a custom CSS code under the Form Designer->CSS Tab.

    Here's my custom Code:

    /*To hide the top label*/

    #label_303 {

        display : none !important;

    }

     

    #label_304 {

        display : none !important;

    }

    #label_302 {

        display : none !important;

    }

    /*To adjust the spacing between your headings and sections*/

    li.form-line.form-line-column.form-col-1.form-line-column-clear#id_305 {

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        margin-top : 0px !important;

        margin-bottom : 0px !important;

    }

     

    li.form-line.form-line-column.form-col-1.form-line-column-clear#id_282 {

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        margin-top : 0px !important;

        margin-bottom : 0px !important;

    }

     

    li.form-line.form-line-column.form-col-1.form-line-column-clear#id_306 {

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        margin-top : 0px !important;

        margin-bottom : 0px !important;

    }

     

    li.form-line.form-line-column.form-col-1.form-line-column-clear#id_298 {

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        margin-top : 0px !important;

        margin-bottom : 0px !important;

    }

     

    li.form-line.form-line-column.form-col-1.form-line-column-clear#id_307 {

        padding-top : 0px !important;

        padding-bottom : 0px !important;

        margin-top : 0px !important;

        margin-bottom : 0px !important;

    }

    /*Reposition and align the 3 input fields at the top most of your form*/

    #id_303 {  

        padding-right: 10px !important;

    }

    #id_304, #id_302 {

        padding-left: 10px !important;

        padding-right: 10px !important;

    }

    Here's a sample screenshot to where to place the code:

    Here's the form again, this is the same form that I shared in the first thread about the print preview, I'll be making all the changes in that form: http://form.jotformpro.com/form/51021466352951?. You can just clone the form to see the updated custom CSS codes.

    Kind regards.