Spinner not displaying correctly on mobile when embedded

Preview looks ok, but on my mobiles (pixximaging.com) the spinner does not display the number, just the arrows. Can you help? Thanks.

Hi hughdal,

Thanks for reaching out to Jotform Support. I can't seem to locate the form on your website. Can you point us to the exact URL where you embedded your form? Meantime, I tested your form's direct URL on mobile and the Spinner displays just fine. Check out screenshot below to see my results:

Once we hear back from you, we'll have a better idea of what's going on and how to help.

Yes sorry I forgot, the form is an iframe and launched from the mobile menu "Order paper prints" (at pixximaging.com) The second image is what I am seeing on mobile. Thanks.

Hi hughdal,

As the issue only happens when the form is embedded, you can try re-embedding the form using the code below? Notice that it's the same code, but I removed the scripts that I suspect is causing conflicts on your website.

    <iframe

id="JotFormIFrame-240986822806264"

title="PAPER ORDER - Latest"

onload="window.parent.scrollTo(0,0)"

allowtransparency="true"

allow="geolocation; microphone; camera; fullscreen"

src="https://form.jotform.com/240986822806264"

frameborder="0"

style="min-width:100%;max-width:100%;height:538px;border:none;"

scrolling="no"

>

</iframe>

Keep us updated and let us know if you need any more help.

That didn't work, and the next button disappeared. Thanks.

Hi hughdal,

It appears that the spinner width of the embedded form changes when viewed on mobile. You can customize it with the help of CSS code. Let me show you how:

1. Copy the CSS codes below.

.form-spinner {

    width: 65% !important;

}

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

.form-spinner {

    width: 65% !important;

    min-width: 65% !important;

    max-width: 100% !important;

    padding-right: 109px !important;

}

}

2. In Form Builder, click on the Paint Roller icon at the top right corner.

3. Click on the Styles tab.

4. Scroll down to the Inject Custom CSS section, and paste the CSS code:

That's it. You might also want to check out this guide about How to Inject Custom CSS Codes.

Give it a try and let us know how it goes.