mobile view single column

  • kauseway
    Asked on December 2, 2016 at 4:18 PM

    ON mobile view how can I get it to display full width but single column. Right now it is 2 columns.  In mobile it all shrinks down  to fit on the screen but I would prefer that each field be on its own row.

     

    https://form.jotform.com/63225125684152

    Page URL: https://form.jotform.com/63225125684152
  • David JotForm Support Manager
    Replied on December 2, 2016 at 6:53 PM

    Please go into your form's CSS area, and delete all the code you find there, and paste the following instead: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    @media only screen and (max-width: 480px) {

    #id_4,#id_7,#id_3,#id_21 {

        width: 100% !important;

    }

    }

    .form-label.form-label-top {

        display : none;

    }

    /**button width**/

    #input_2 {

        width : 100%;

        border-radius : 8px;

    }

    /**holder of text box 1 and 2**/

    #id_1 {

        width : 65% ;

    }

    #id_7 {

        width : 33% ;

    }

    #input_1 {

        width : 99%;

    }

    #input_7 {

        width : 99%;

        border-radius : 8px;

    }

    /**holder of text box 3 and 4**/

    #id_3 {

        width : 49.5%;

    }

    #input_3, #input_4 {

        width : 99%;

        border-radius : 8px;

    }

    ::-webkit-input-placeholder {

        color : #ffffff;

    }

    :-moz-placeholder {

        color : #ffffff;

    }

    .form-line-error {

        background : #000000;

    }

    .form-textbox.focus.inputmask {

    }

    #id_19 {

    }

    #input_21 {

        width : 99%;

        border-radius : 8px;

    }

    #id_21 {

        width : 47%;

    }

    #id_4 {

        width : 63.1%;

    }

    Result: https://form.jotform.com/63366750880968 

    mobile view single column Image 1 Screenshot 20

    Or you could simply clone my form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL