Next button on my form is not responsive

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

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! 

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

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.

Hi Helen,

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

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.

That makes it worse, and messes up the mobile responsiveness

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!