How to get 'submit' button to auto resize for tablet and mobile view?

  • Profile Image
    adnan99
    Asked on April 24, 2016 at 03:27 PM

    Hi, 

     

    So I've created a form using jotform. The form works great in every aspect, except my submit button does not auto resize when using a mobile device or tablet. 

     

    The questions within the form, resize perfectly, but the 'submit' button does not. 

    Please can you assist, as on all mobile and tablet devices, the button extends beyond the side of the page. 

     

    Here is an example of the form within my site. ( I had even tried to place the form within an 'element' box, but it did not have the desired effect) 

     

    http://homeonlinemarketings.com/done-for-you-2-3/

     

    The website below, is an example of how the button should resize itself, when using mobile view. 
    http://dcrmarketing.com/svq/

     

    I've also attached a picture to illustrate how the button looks on mobile view. 

     

    Thanks

     

    Adnan

     

  • Profile Image
    Carina
    Answered on April 24, 2016 at 04:48 PM

    Please try adding the following css code:

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

    {

    .form-all .qq-upload-button,

    .form-all .form-submit-button,

    .form-all .form-submit-reset,

    .form-all .form-submit-print {

    height: 40px;

    width: 100% !important;

    padding: 12px 18px;

    font-family: "Arvo", sans-serif;

    font-size: 16px !important;

    font-weight: normal;

    border: none;

    border-width: 2px !important;

    border-style: solid !important;

    border-color: #ae9c9c !important;

    }

    }

    In addition you can test and clone the demo form:

    https://form.jotform.com/61146540649962 

    Let us know if we can assist you further.