What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Keep the default layout on small screens

    Asked by leovitor 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

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

    layout keep appearance site www
  • Profile Image

    Answered by Syed 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

    Answered by leovitor on May 04, 2015 at 03:25 PM

    It worked. Thank you!

  • Profile Image

    Answered by Syed on May 04, 2015 at 03:26 PM

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

     

    Have a great day!