How can I make my forms fit on mobile devices?

  • Profile Image
    milehighwinetours
    Asked on February 09, 2017 at 05:04 PM

    Hello -

     

    There are a few forms I created that currently don't fit on mobile devices (phones) hence, people can't input anything if they're using a phone. Any advice on how to size it for mobile devices while keeping a good quality size for desktops?


    Thank you,

    Felipe

  • Profile Image
    Kevin_G
    Answered on February 09, 2017 at 07:15 PM

    You may try adding the mobile responsive widget to your form: https://widgets.jotform.com/widget/mobile_responsive 

    How-to-Add-a-Widget-to-your-Form

    If the form still does not fit on mobile devices, then you could try injecting this CSS code to your form as well: 

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0;

    }

     

    .form-line{

    width: 100%;    

    }

     

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

     

    .form-label-left, .form-label-right{

    width: auto !important;

    }

     

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

     

    .form-input {

    width: 100% !important;

    }

     

    .form-all{

    width: 75% !important;

    }

     

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

    }

    How-to-Inject-Custom-CSS-Codes

    Hope this helps. 

  • Profile Image
    milehighwinetours
    Answered on February 10, 2017 at 09:40 PM

    Hello, 

    I inserted the code to the css area and clicked on the "get now" button for the widget. It hasn't affected the view on my mobile device but maybe it takes some time. Please help.

    Thanks!!

  • Profile Image
    Charlie
    Answered on February 11, 2017 at 08:02 AM

    Hi,

    This is because you have this CSS code in your form that states that the form should have a width of 980px, which is why in mobile devices it exceeds the screen size:

     

    You can delete that specific code.

    I also suggest that you look for this specific code:

    .form-all {

    width: 75% !important;

    }

     

    And change the width to 100%. See if that works for you. 

    Let us know if that helps. 

  • Profile Image
    milehighwinetours
    Answered on February 11, 2017 at 03:14 PM

    Ok. I think it kinda worked. Thank you.