Keep the default layout on small screens

  • Profile Image
    leovitor
    Asked on May 04, 2015 at 02:42 PM

    My form is getting responsive, changing the appearance in small areas. But I do not want it to be responsive.I not scored this option. I want him to remain with the same appearance, even on small screens. What can i do?

     

    Layout desired:

    http://form.jotformz.com/form/51235443823653

     

    Modified layout because it is a narrow area:

    http://www.logomidia.com.br/site/promocao

  • Profile Image
    Syed
    Answered on May 04, 2015 at 02:55 PM

    Hi there;

            Please try to delete the following CSS Code Block to make the form un-responsive. Review the following screenshot, I just have imported your form for this particular thread.

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

    .jotform-form {

    padding: 0;

    }

    .form-all {

    border: 0;

    width: 100%;

    max-width: initial;

    }

    .form-sub-label-container {

    width: 100%;

    margin: 0;

    }

    .form-input {

    width: 100%;

    }

    .form-label {

    width: 100%!important;

    }

    .form-line {

    padding: 2% 5%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    input[type=text],

    input[type=email],

    input[type=tel],

    textarea {

    width: 100%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    max-width: initial !important;

    }

    .form-input,

    .form-input-wide,

    .form-textarea,

    .form-textbox,

    .form-dropdown {

    max-width: initial !important;

    }

    div.form-header-group {

    padding: 24px 0px !important;

    margin: 0 12px 2% !important;

    margin-left: 5% !important;

    margin-right: 5% !important;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    [data-type="control_button"] {

    margin-bottom: 0 !important;

    }

    .form-buttons-wrapper {

    margin: 0!important;

    }

    .form-buttons-wrapper button {

    width: 100%;

    }

    table {

    width: 100%!important;

    max-width: initial !important;

    }

    table td + td {

    padding-left: 3%;

    }

    .form-checkbox-item input,

    .form-radio-item input {

    width: auto;

    }

    .form-collapse-table {

    margin: 0 5%;

    }

    }

    Do let us know how it goes.

     

    Thankyou,

  • Profile Image
    leovitor
    Answered on May 04, 2015 at 03:25 PM

    It worked. Thank you!

  • Profile Image
    Syed
    Answered on May 04, 2015 at 03:26 PM

    Please will shout us anytime, we would be happy to assist you :)

     

    Have a great day!