Next button on my form is not responsive

  • Profile Image
    avijfr
    Asked on May 08, 2017 at 03:04 PM

    Hi Support Team,

    My question is in regards the responsiveness of a button on my form.

    On mobile the button isn't responsive on my iphone 6: http://imgur.com/NH7KJks

    On my desktop it's fine: http://imgur.com/pLAlE7z

     

    Thanks

  • Profile Image
    Kiran
    Answered on May 08, 2017 at 04:25 PM

    I have checked your JotForm and see that the width of the next button is set to 300px in the custom CSS code. Please change this to 270px and add the following CSS code to the form to display the button correctly on the mobile device and desktop as well.

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

    .form-all .form-pagebreak-next-container {

       margin-left: 4% !important;

    }

    }

    Hope this information helps! 

     

  • Profile Image
    avijfr
    Answered on May 09, 2017 at 09:12 AM

    Hi Kiran,

    I implemented that code but now the following has happened when I'm on desktop:

     

    The button has gotten smaller: http://imgur.com/R9DFQkI

  • Profile Image
    Helen
    Answered on May 09, 2017 at 10:56 AM

    Hello,

    Thank you for contacting us.

    Please change your button from 270px to 300px again. Your CSS codes must be like this:

    #form-pagebreak-next_21 {

        background : #00d689 !important;

        color : #fff;

        -webkit-border-radius : 5px;

        -moz-border-radius : 5px;

        border-radius : 5px;

        border : 0px;

        width : 300px;

        height : 60px;

        font-size : 20px !important;

        text-shadow : 0 0px #000 !important;

    }

    Then add this custom CSS code to code that my colleague sent you before. Here is a this custom CSS code:

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

     

    .form-all .form-pagebreak-next-container {

          margin-left: 4% !important;

    }

    #form-pagebreak-next_21 {

      width: 270px;

      }

    }

     It will solve your issue, your form will shown properly on mobile.

    Please try this solution, if the issue still persists, please let us know.

    We will be waiting for your response.

  • Profile Image
    avijfr
    Answered on May 09, 2017 at 11:13 AM

    Hi Helen,

    My button on mobile is fine now, but on desktop it no longer spans across the whole form. It is cut short. 

  • Profile Image
    BDAVID
    Answered on May 09, 2017 at 12:42 PM

    Please inject this code to solve the issue: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #form-pagebreak-next_21 {

        width: 390px;

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    avijfr
    Answered on May 09, 2017 at 12:51 PM

    That makes it worse, and messes up the mobile responsiveness

  • Profile Image
    Kiran
    Answered on May 09, 2017 at 02:18 PM

    I have checked your web page and it seems that you have changed the form. Could you provide us with the form URL that you are working on so that we can check it further.

    We will wait for your response. Thank you!