reduce the margin

  • Profile Image
    kauseway
    Asked on September 11, 2015 at 08:58 PM

    is there a way to reduce the margin or padding around all sides and in between fields without hurting the responsiveness.?

     

  • Profile Image
    Boris
    Answered on September 12, 2015 at 05:44 PM

    Yes, we can do that by injecting custom CSS into your form.

    I have noticed that your other form named fiverr is already made in such a way:

    http://www.jotformpro.com/form/52544336851962

    Here is the full custom CSS that was used on that second form to achieve its appearance:

    /* Custom CSS by Malayadavparsu */
    html.supernova div.form-all, div.form-all {
        background-color : rgb(44, 182, 217) !important;
    }

    .form-all {
        padding : 0;
        margin : 0 auto;
        border-radius : 2.5px;
    }

    .form-line {
        padding : 0;
    }

    ul.form-section.page-section {
        padding : 2.5px 2.5px 3px 3px;
    }

    li[data-type=control_widget] {
        display : none;
    }

    button#input_2 {
        margin : 4px 0px 0px 0px;
        padding : 0;
        background : #0E9BBF;
        font-family : 'open sans';
        text-transform : uppercase;
        font-size : 15px;
        border : 2px solid #0481A0 !important;
    }

    li#id_7, li#id_1, li#id_3, li#id_4 {
        width : 48.85% !important;
        margin : 0;
    }

    li#id_1, li#id_3 {
        padding : 0px;
    }

    li#id_7, li#id_4 {
        padding : 0px 0px 0px 2.8%;
    }

    li.form-line.form-line-column {
        color : #323a3b;
    }

    div#cid_1 {
        position : relative;
    }

    div#cid_3, div#cid_4 {
        margin-top : 4px;
    }

    #cid_1:after {
        content : '';
        background-image : url(//www.accommodation.net/img/location-icon-blue.png);
        position : absolute;
        left : 2px;
        width : 11px;
        height : 16px;
        top : 17px;
    }

    input#input_1 {
        width : 98% !important;
        padding : 1% 0.3% 1.5% 5%;
    }

    @media screen and (max-width:762px){
        .form-all {
            width : 90%;
        }

        #input_7, #input_1, #input_3, #input_4 {
            width : 98.5% !important;
        }

        ul.form-section.page-section {
            padding : 1px 1px 2.5px 1px;
        }

        li#id_7, li#id_1, li#id_3, li#id_4 {
            width : 98% !important;
            padding : 0;
            margin : 3px;
            float : none;
            clear : both;
        }

        input[type=text] {
            padding : 7.5px;
        }

        button#input_2 {
            margin-top : 2px;
            width : 99.5%;
        }

        input#input_1 {
            width : 95.5% !important;
        }

        li#id_3, li#id_4 {
            margin-top : 0;
        }

        input#input_4 {
            width : 98% !important;
        }

    }

    @media only screen and (max-width: 40em){
        li#id_2 {
            padding : 0;
        }

        input#input_1, input#input_7, input#input_3, input#input_4 {
            width : 101% !important;
        }

    }

    If you wish to take only the padding and margin styles from it, without including the color changes, you can try using this shortened version of that code:

    .form-all {
        padding : 0;
        margin : 0 auto;
        border-radius : 2.5px;
    }

    .form-line {
        padding : 0;
    }

    ul.form-section.page-section {
        padding : 2.5px 2.5px 3px 3px;
    }

    li[data-type=control_widget] {
        display : none;
    }

    button#input_2 {
        margin : 4px 0px 0px 0px;
        padding : 0;
    }

    li#id_7, li#id_1, li#id_3, li#id_4 {
        width : 48.85% !important;
        margin : 0;
    }

    li#id_1, li#id_3 {
        padding : 0px;
    }

    li#id_7, li#id_4 {
        padding : 0px 0px 0px 2.8%;
    }

    div#cid_3, div#cid_4 {
        margin-top : 4px;
    }

    input#input_1 {
        width : 98% !important;
        padding : 1% 0.3% 1.5% 5%;
    }

    @media screen and (max-width:762px){
        .form-all {
            width : 90%;
        }

        #input_7, #input_1, #input_3, #input_4 {
            width : 98.5% !important;
        }

        ul.form-section.page-section {
            padding : 1px 1px 2.5px 1px;
        }

        li#id_7, li#id_1, li#id_3, li#id_4 {
            width : 98% !important;
            padding : 0;
            margin : 3px;
            float : none;
            clear : both;
        }

        input[type=text] {
            padding : 7.5px;
        }

        button#input_2 {
            margin-top : 2px;
            width : 99.5%;
        }

        input#input_1 {
            width : 95.5% !important;
        }

        li#id_3, li#id_4 {
            margin-top : 0;
        }

        input#input_4 {
            width : 98% !important;
        }

    }

    @media only screen and (max-width: 40em){
        li#id_2 {
            padding : 0;
        }

        input#input_1, input#input_7, input#input_3, input#input_4 {
            width : 101% !important;
        }

    }

    I hope it helps. Please let us know how it goes.