Preview Before Submit widget: Layout and button not correct

b). In the same form if in your "Description" field you have a big big text or a long text, while being on the preview widget its look really messed up... there is no responsive in there... the screen goes as big as the text lenght... see pictures:

 

In this pic you see the really long text making all the form become bigger to the right.

 

see the submit button becoming big to the right...

In my first post, could you please try enabling the mobile responsive option in the Form Designer Tool.

After that, the only problem that I'm seeing is the buttons. How do you want the buttons to be formatted in the mobile view?

Here's my updated CSS code, the code referring to the preview containers button is at the last part and is bolded:

@media screen and (max-width: 640px), screen and (max-device-width: 780px) and (orientation: portrait), screen and (max-device-width: 780px) and (orientation: landscape){

    /* Credit Card Number*/

.form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(1) {

        width : 70% !important;

    }

    .form-textbox.cc_number {

        width : 95% !important;

    }

    /* Security Code*/

.form-address-table > tbody:nth-child(1) > tr:nth-child(3) > td:nth-child(1) > span:nth-child(2) {

        width : 28% !important;

    }

    .form-textbox.cc_ccv {

        width : 100% !important;

    }

    /*Expiration month*/

.form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(1) {

        width : 48% !important;

    }

    .form-dropdown.cc_exp_month {

        width : 93% !important;

    }

    /*Expiration Year*/

.form-address-table > tbody:nth-child(1) > tr:nth-child(4) > td:nth-child(1) > span:nth-child(2) {

        width : 50% !important;

    }

    .form-dropdown.cc_exp_year {

        width : 100% !important;

    }

    /* Preview containers margin */

    #previewContainer > ul > li > #previewButtons {

    margin-left: 20% !important;

    margin-right: 20% !important;

}

   /* Buttons */

    #previewContainer > ul > li > #previewButtons > button {

        width: 100px !important;

    }

}

 

This is how it looks like:

 

Let us know if that works. Again, here's my updated cloned form: https://form.jotform.com/61016127995963