Images are not scaling in Responsive Form

If you look at the page in the URL link provided you will see that on a desktop Display the form and the image at the bottom of the Form look OK.

Now look at the form on a Smart Phone or tablet and the image has not scaled and looks out of proportion, in some cases the image increases in size.

Is this fixable please?

thx

John

Hi John,

I was able to see the problem as well when I made a test using the form on your website.

The secure image logo on the form blocked the Submit button of the form on the website.

However, when I used the direct URL of the form http://www.jotformpro.com/form/53362537741962 the issue did not happen.

I think the iframe embedded form on the website only lacks the height it needs to be able to fully display the embedded form.

Can you please try first gathering again the iframe code of the form and re-embed? See if the new iframe code now fits.

If it did not, you can manually increase the iframe height so that the whole form will be displayed.

user guide: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Let us know if issue persist.

Thanks. 

Hello,

Since i added the image, which was my png version with transparent background of your standard image, i have been having some strange intermittent display issues when viewing the form on smartphones/Tablets. so for the time being i have removed the image to make sure all is OK without it.

And yes i have updated the iframe embedded code when i make the changes, so am puzzled by the strange behavior.

thx

John

Hi John,

Thank you for updating us on the status.

I checked again using your website, and I can see the embedded form now can be use properly.

Please don't hesitate to contact us again anytime should you require assistance on JotForm

Regards

Yes but the issue still needs to be resolved, it appears the form"Breaks" when you add an image as i did.

I believe Jotform should investigate.

Thx

John

Hi John,

Actually, you can find a solution for this problem by injecting some custom CSS code to your form. With "@media" rule, you can make that image responsive for mobile platforms.

Below, you will the CSS code that I prepared for your form. The following one adjust the image size with respect to the resolution. 

@media screen and (min-width: 10px) and (max-width: 400px){

    #cid_24 img.form-image {

        width : 75px !important;

        height : 75px !important;

    }

}

r

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

    #cid_24 img.form-image {

        width : 150px !important;

        height : 150px !important;

    }

}

@media screen and (min-width: 601px) and (max-width: 2400px){

    #cid_24 img.form-image {

        width : 160px !important;

        height : 160px !important;

    }

}

Also, here is the result on 1334 x 750 display iPhone.

Please, try this method and let us know the results. If you encounter any error or need extra information, always feel free to contact us.

Thanks.

Hello,

Thank You, I have decided to use the images differently on the site so will not embed them in the forms. However your response is very helpful and i will keep the info as a reference.

Thanks

John

Hi again,

You are most welcome. Please, keep that on your mind the code above can also used in any field to make it responsive. If you encounter this problem again with other fields, you can use this one as a template to make them responsive.

Have a great day.