How can I get an image in my form to display properly on mobile?

I have an image in my form with text boxes overlayed where responses are needed. It looks fine on a desktop view, however, when I view it on my iphone the image does not display fully (the right side of the image is cut off) and the text boxes are scattered around the form in the wrong locations. I have tried copying the iframe code into my weebly site and used the mobile responsive widget on jotform but the problem persists.

A link to the form:

Hello,

I have checked your form and cloned it on my side in order to test it. I have seen that you've injected some wrong CSS codes to your form which makes the form broken and unresponsive to mobile.

When I deleted those CSS codes and previewed it on iPhone, the form looks good as you can see the screenshot below:

Please delete those CSS codes or inject media queries to the CSS editor.

Thanks in advance.

I can get the image to show up correctly when removing the injected CSS but I need to have text boxes overlayed on the image. To do that I have to use CSS. It looks fine on desktop but when I view it on my iphone the image gets cut off on the right and the text box is not in the right spot. I am using iframe with the mobile responsive widget.

Hi,

Please allow me some time to further check your form. I'll get back once I've found results.
Regards.

Thank you so much for the assistance.

Hi again,

I checked your form and I noticed that there is an excess <style> tag on your form. Please remove this:

It should look like this:

The, please inject this custom CSS on your form to correctly position the text box when viewing it on mobile:

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

input#input_4 {

    position: relative !important;

    width: 100px !important;

    top: -25px !important;

    height: 15px !important;

}

}

Result:

Let us know if you need further assistance.
Regards.

Thank you! It looks better on the phone when vertical now. I think I can make that work for the whole form.

I was wondering though, is there a way to have each text entry box's position and size related to the image I am overlaying them on. For example, could I could have a text entry box set to be 10% from the top of the image and 25% from the left and widths and heights also a % of the width and height of the image.

Yes, you can adjust the position of the textbox according to your preferences. Just note that if you want the sizes, height, and position to properly view it on mobile view, you need to add the code inside the @media.

Regards.