Form displaying full width on mobile devices

  • Profile Image
    henryclarke10
    Asked on April 04, 2017 at 03:47 PM

    Hello.  We have a form on this page: 

    http://henryclarkewebdesign.com/a-new-site-services/websites/mobile-friendly-responsive-websites/ 

    I've checked "make this form responsive."

    But the form is not fitting in a narrow phone screen.  See: https://www.screencast.com/t/YSWwpzBR

    Let me know what we need to do.  Thanks for your help.

     

  • Profile Image
    Kiran
    Answered on April 04, 2017 at 07:31 PM

    Please try injecting the following CSS code to the form so that it should be displaying correctly on the mobile devices.

    @media screen and (min-width: 10px) and (max-width: 540px){

    .jotform-form {

        padding: 10px 0 !important;

    }

    .form-all {

        width: 95%;

    }

    }

    Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    henryclarke10
    Answered on April 05, 2017 at 03:31 PM

    Thanks Kiran.  

    I added the CSS and the form still looks the same as before.  I tried editing the max-width and width with no success.  I cleared the cache as well.

    Let me know if you have another edit.  

    Thanks again.

  • Profile Image
    Kiran
    Answered on April 05, 2017 at 04:52 PM

    I have checked the web page on a mobile emulator and see that the form is displaying without any issues. 

    Could you let us know which mobile you are using so that we'll try to replicate the issue at our end and provide you with necessary assistance.

    Thanks!

  • Profile Image
    henryclarke10
    Answered on April 06, 2017 at 07:58 AM

    I tested it on a live iPhone 5s.  I checked it on a Samsung and all was well.  

  • Profile Image
    ashwin_d
    Answered on April 06, 2017 at 08:48 AM

    Hello henryclarke10,

    Please inject the following custom css code and see if that solves your problem:

    @media screen and (min-width: 10px) and (max-width: 540px){

    .supernova .form-all, .form-all {

        margin-left: opx !important;

        margin-right: 0px !important;

    }

    .form-all {

        width: 95%;

    }

    }

    Do get back to us if the issue persists.

    Thank you!