Problem with buttons

Hello,

I have developed a form but the buttons are not working on mobile. Please find hereafter some print screens

For example here the third button is clicked (see the yellow highlight),but not selected when I try to click. the form is this one: https://form.jotform.com/203313044405339

Can you please get back to me with the Front end code snippets to add ?

cheers

Greetings,

I've been doing testing on a clone of your form and the issue seems to be caused due to the Old Default Theme you are currently using.

I've applied your form stylings in the cloned form and it seems to be working properly.

https://form.jotform.com/210392662560958

Here is you can clone it.

https://www.jotform.com/help/42-how-to-clone-an-existing-form-from-a-url

Should you need further assistance then please let us know.

Thanks

hello

thanks for your help

I spotted 2 problems I can't work out with your form (see below)

1)next/ back button should be one above the other

2)when you select an option, the whole block turns white

can't work out how to change it

can you please help?

cheers

In any case, I can't duplicate your form alas!

Hi there,

I have now disabled the "Prevent Cloning" option on the form.

You may now clone it from your end.

Best.

Thanks kenneth

what about the 2 other problems?

1)next/ back button should be one above the other

2)when you select an option, the whole block turns white

thanks

Hi there!

Kindly inject the CSS code below to your form to remove the white background and the shadow.

.form-line-active{

    background-color:transparent!important;

}

.form-line-active input:focus{

    box-shadow: none;

}

I notice the next and back buttons are already stacked on mobile, do you wish to align them like this on larger screen as well?

Hello,

on the new form, the buttons are not stacked. Please see this form: https://form.jotform.com/210394082342348

thanks for your help

Kindly use the CSS code below to stack the Next and Back button on the form.-

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





li[data-type=control_pagebreak] .form-pagebreak {

    -ms-flex-wrap: nowrap;





    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}





.jf-form-buttons:not(.form-pagebreak-back) {

   margin-left: 0px; 

}





.form-pagebreak-back-container {

     margin-right:0; 

}





.form-buttons-wrapper, .form-submit-clear-wrapper {

    display: flex;

    justify-content: center;

    flex-direction: column;

    align-items: center;

    

}





.form-all .form-submit-button{

    margin-top: 10px;

}

.form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container, .form-all .form-submit-button{

    width: 100%!important;

}

}

.form-line-error {

    background-color: transparent!important;

}

Let us know if you need further assistance.

It works really good for mobile but the full screen version is overlapping on the right

how can I fix it?

thanks a lot for the help!

I have injected the following custom CSS code in your form and that seems to have fixed the issue:

@media screen and (min-width: 600px){

.form-pagebreak-next-container {

  margin-right: 50px !important;

}

}

Please test your form again and get back to us if the issue persists.

We will wait for your response.