How to increase width of the form while maintaining the 2 columns?

  • neoranking
    Asked on April 6, 2016 at 11:49 PM

    How can I increase the width of the form with maintaining the 2 columns and centered?

    This is my form:

    https://form.jotform.me/60912818692463

    Thanks.

    Best regards.

  • mert JotForm UI Developer
    Replied on April 7, 2016 at 3:50 AM

    Hi there,

    By injecting custom CSS rules to your form, you can easily increase the width of the form. Adjusting the "max-width" value from the code below will give you the desired width.

     

    .form-all {

        width: 100%;

        max-width: 726px !important;

    }

     

    ul.form-section.page-section {

        width: 620px !important;

        margin: 0 auto;

    }

     

    Also, alignment in two columns will be protected. Please, try this one and let us know the results.

    Regards.

  • neoranking
    Replied on April 7, 2016 at 5:51 AM

    There's no difference Mert.

    http://encemarketing.com/landing-page/

  • mert JotForm UI Developer
    Replied on April 7, 2016 at 7:41 AM

    Hi again,

    I noticed that there are some other custom CSS rules which have added before, that's why the code I gave doesn't affect correctly on your form. So, please delete the complete CSS code after "/* | *//*__INSPECT_SEPERATOR__*/" and paste the one from the below:

     

    .form-label-top {

    display : none;

    }.form-required {

    color : transparent;

    }.form-line-error {

    background : none repeat scroll 0 0;

    }.form-error-message,

    .form-button-error {

    display : none !important;

    }.form-validation-error {

    -moz-box-shadow : none;

    -webkit-box-shadow : none;

    box-shadow : none;

    }input {

    width : 100%;

    }.form-col-1 {

    width : 100% !important;

    max-width: 371px !important;

    }textarea#input_7 {

    width : 100%;

    height : 265px;

    position : absolute;

    }.form-captcha {

    position : absolute;

    }.jotform-form {

    padding : 0px 0;

    }#id_12 {

    margin-top : -70px;

    height : 100px!important;

    }#id_7 {

    margin-top : -240px;

    height : 265px!important;

    }.form-all {

    width : 100%;

    max-width : 800px !important;

    }ul.form-section.page-section {

    width : 747px !important;

    margin : 0 auto;

    }

     

    Please, don't worry this is only changing the size of the form and fields, all of the features apart from those will stay. Also, you can see its final look from the following image:

    How to increase width of the form while maintaining the 2 columns? Image 1 Screenshot 20

     

    I hope this one helps, please do let us know the results.

    Thanks.