Make JotForm Responsive to smaller display device

  • Profile Image
    Umesh91
    Asked on October 08, 2014 at 08:38 AM

    Hello following is my jotform url

    http://form.jotform.us/form/42304354795154

     

    I have injected the following css classes using inject css feature of the jotform but i want to make my jotform responsive for the mobile,iphone,ipad like devices so for small device i have added the media query at the end but it is not applying for the small device resolution 386px.

    so please let me know where it is wrong?

    i have also taken reference of the following url

    http://www.jotform.com/answers/381293-How-to-make-a-Responsive-form-for-my-website-Revolution-Slider-Wordpress-CMS

     

    .form-submit-button

    {

    background: none;

    background-color: #3cb371;

    outline: none;

    padding: 10px;

    text-transform: uppercase;

    box-shadow: none;

    font-weight: normal;

    font-size: 14px;

    color: #fff;

    border: 1px solid #000;

    border-radius: 0;

    text-shadow: 0 0 #fff;

    }.form-submit-button:hover

    {

    background: none;

    background: -moz-linear-gradient(top, #3cb371 0%, #3cb371 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3cb371), color-stop(100%,#3cb371));

    }.form-header-group

    {

    background: transparent;

    border: none;

    margin: 0 0 10px;

    }.form-label-left

    {

    width: 100% !important;

    }

    .form-line

    {

    padding-left: 0;

    }

    .form-header

    {

    font-family: 'Arial';

    font-size: 18px;

    color: #000000;

    background: none;

    text-transform: uppercase;

    margin-top: 0;

    }.form-all

    {

    margin: 0px auto;

    width: 100%;

    padding-top: 0px;

    display: block;

    float: left;

    color: #000000 !important;

    font-family: 'Arial';

    font-size: 13px;

    }

    .form-textbox

    {

    width: 100%;

    }

    .form-textarea

    {

    width: 100%;

    }

    strong

    {

    font-weight: normal;

    }@media only screen and (max-width: 386 px)

    {

    .form-submit-button

    {

    width: 61% !important;

    }

    }

    Thanks in advance

    Umesh,

     

     

     

     

  • Profile Image
    Charlie
    Answered on October 08, 2014 at 10:19 AM

    Hi Umesh,

    If you would like to make your form responsive to smaller display devices, like mobile phones, you can use this widget, http://widgets.jotform.com/widget/mobile_responsive.

    It is an easy to use widget, there is no additional configuration required. However, please consider not adding any extra CSS customization on the form after creating it in the form builder, as this might affect how the widget works.

    Let us know if this helps.

    Thank you.