Fields overlaps when viewed on tablet or mobile devices

Hi,

I love the jotform ease-of-use!  We created a jotform for lead generation on our website.  It looks fantastic on PC, but I noticed that a drop down moves and covers another box when using a tablet or phone.  Is there anything I can do to fix this?

 

I believe you are referring to the drop-down field, "How Did You Hear About Us?". It seems to look fine on my end. Here's how your form and website looks like viewing from an android phone.

Your form:

And when embedded on your website

 

However, on a tablet (Samsung Galaxy Tab 5 10.1)

Your form:

And when embedded on your website

The screenshot shown above shows that your form looks fine on devices. If you provide us the type of device where you're having issues viewing your form properly, that would be great. It would also help if you will provide us some screenshots. 

Thank you.

When I view it on my iPad, it looks like the attached screenshot.
[cid:1EE1E7F1-4045-4F7F-95B8-B2F0B6DC8C54]
Nick Vail
...

Hi,

I was able to replicate your issue. This should be solve using the "@media only screen" CSS code. I have not been able to solve the issue, but once I have the code I will let you know.

Regards

Ok, great. I look forward to the solution. Thanks so much.
Nick Vail CRPC
Chartered Retirement Planning Counselor
Financial Advisor
Integrity Wealth Advisors
Securities America Inc, Securities America Advisors
8888 Keystone Crossing, Suite 1300
Indianapolis, IN 46240
Phone: 317-575-4110









...

Hi Nick,

 

I checked again your form on an iPad emulator but I was not able to replicate the issue.

 

If you are still encountering the issue, can you try to re-embed your form in your website using the iFrame embed method and see if it will help? To get the iFrame embed code of your form, just follow the instruction provided in the screenshot below.

I also noticed that the Responsive form setting of the form is set to "No", can you try to set this to "Yes"?

 

Do let us know if the issue still persists.
Regards.

What is the responsive form setting?
Also, if I use the iFrame code, will it affect how the form looks on non-Apple devices?
Nick Vail CRPC
Chartered Retirement Planning Counselor
Financial Advisor
Integrity Wealth Advisors
Securities America Inc, Securities America Advisors
8888 Keystone Crossing, Suite 1300
Indianapolis, IN 46240
Phone: 317-575-4110









...

Hi,

 

Responsive form setting will re-size the forms in the controls based on the screen size of the device you are using to make it more mobile-friendly. I haven't tried the iFrame code in an non-apple device yet but it should work better than other embed methods.

 

Also, we were not able to see your screenshot from your device. To properly upload an image in this forum, just click the image icon above.

 

Attached is the screen shot. Also, if I use the iFrame code, will it still look the same on non apple devices?
Nick Vail CRPC
Chartered Retirement Planning Counselor
Financial Advisor
Integrity Wealth Advisors
Securities America Inc, Securities America Advisors
8888 Keystone Crossing, Suite 1300
Indianapolis, IN 46240
Phone: 317-575-4110









...

Using the iframe code, most of the time, prevents conflicts between your website scripts and your form scripts. Your form, embedded on your website, will just look the same on non-apple devices when using the iframe. Should there be an issue, let us know and we will glad to fix it for you.

By the way, the screenshot you have posted is still not showing. Kindly follow the instruction on this thread on how you can post a screenshot to forums. 

We will wait for your response. Thank you.

I have used an iPad Mini 3 simulator and was able to see what you mean. 

I'll get back with a solution. 

Thank you. 

Using this guide: How-to-Inject-Custom-CSS-Codes

Please insert this CSS codes to your form: 

@media only screen 

and (min-device-width : 768px) 

and (max-device-width : 1024px)  {

#id_5{

padding-left: 180px !important;

}

}

Once you've done that, it should look like this.

I hope this helps. Let us know if you need any further assistance. Thank you. 

 

Fantastic. Thanks so much.
Nick Vail CRPC
Chartered Retirement Planning Counselor
Financial Advisor
Integrity Wealth Advisors
Securities America Inc, Securities America Advisors
8888 Keystone Crossing, Suite 1300
Indianapolis, IN 46240
Phone: 317-575-4110









...