Scrolling error on Wix mobile site

Hello! 

My clients are facing a problem while using the form from the mobile-site, they mentioned that when they scroll down and check some of the products the page automatically scrolls up and take them to the top and they cant finish their orders.

Thank you in advance!

Hello!

Sorry for the inconvenience. I am seeing a cross-origin frame error on your website. 

I suggest, you try embedding the form using the Form URL and paste it on the website following this method. Adding-a-Form-to-Your-Wix-Site

Let us know if the issue persists. 

Regards, 

Thank you Jimmy.

I have followed all suggested steps with re-publishing my website again and tried submitting the form from my personal device (Samsung Note 8) and it worked fine. However, when I asked my client who reported the issue about it again, they have mentioned that the issue is still there, note that they use iphone devices. 

We apologize for inconvenience. May I suggest to try first re-embedding your form on your website using instead its iframe embed code. 

1. Get the iframe embed code of your form.

Guide : Getting the Form iFrame Code

2. In your Wix editor, in HTML settings option, select Code instead.

3. In the HTML code, add the form iframe embed code (from #1).

Make sure to SAVE the changes in the Wix editor.

Please let us know if issue persist even after doing these already.

I did the iframe amendments but its still not working!

I am able to replicate the issue on iPhone.

Can you please try to enable scrolling in your iFrame code and let us know if the issue still remains?

Still, we are facing the issue even though I did enable the scrolling as shown below.

Sorry for the frustration caused. 

Kindly inject the CSS code below to your form. And re-embed the form. 

This should prevent the zooming issue that makes it hard for mobile users to scroll. 

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

.form-matrix-table,.form-dropdown,.form-textbox,.form-all,.form-textarea,.form-radio,.form-checkbox{

font-size: 16px !important; 

}

}

Related guide.- How-to-Inject-Custom-CSS-Codes

Let us know should the problem persists. 

I injected the code you had sent earlier (in Purple), however there was a previous code displayed (in Blue) on the pad so I placed the one you had recommended underneath it as shown below. Later, I tried again by using an iphone and it still didn't work yet.

.form-product-item-detail {

      height: 100% !important;

}

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

#id_15 {

width: 100%;

}

#cid_15 {

width: 100%;

}

.form-all {

 position: relative;

 left: -1%;

}

.form-line {

width: 80%;

}

}

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

.form-matrix-table,.form-dropdown,.form-textbox,.form-all,.form-textarea,.form-radio,.form-checkbox{

font-size: 16px !important; 

}

}

I checked the issue using my Android phone - Google Chrome and it is working fine on my end.

Please try removing the <script> part in the iFrame Embed method code and see if the issue still persists.

We'll wait for your response. Thank you!