- This topic has 7 replies, 2 voices, and was last updated 7 years, 9 months ago by
.
Hi, I’m having trouble with the new Iphone update that now zooms on the contact form and creates a very strange experience where the form keeps moving around as its zoomed in. I read that the following code would fix it but I don’t know where to place it. Please help or if you have another solution I’m all ears!!!
http://www.sweetmephotography.com/affordable-home-newborn-photography/
<pre class=”default prettyprint prettyprinted”><span class="tag"><meta</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span> <span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span class="tag">></span>Hi @shanticfm,
Sorry to hear of the problem you are having.
I visited your shared site but it seems you have not created contact form using Unyson contact form content element.
If it so then could you please tell me a bit more in detail how you have created it and also temporary disable W3 Total Cache on your site?
Best regards,
Shufflehound teamThank you for your quick reply. The contact form is an Iframe linked with the CRM system that my client is using. Below is the iFrame code.
<iframe title=”Contact” src=”http://sweetmephotoar1.studioinquiry.com/inquiryform” width=”500″ height=”770″ frameborder=”0″ scrolling=”no”></iframe>
I have also disabled the W3 Total Cache.
The problem is only on the new Iphone update. Please advice how to proceed.
It seems the issue with CRM system which generated contact form so please contact the CRM system support to resolve it.
That was what we initially did and after much troubleshooting from their end this is what they sent:
It has to do with how it’s embedded on your website…
there are a bunch of CSS classes on that page that are trying to set the width of the iframe (as well as a fixed 1200px width set on the iframe itself. Also the zooming in has to do with the meta tag that’s on the website now, it allows the user to zoom in on mobile devices…
see this article:https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari
That’s where I found the code:
<pre class=”default prettyprint prettyprinted”><span class="tag"><meta</span> <span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span> <span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no"</span><span class="tag">></span>
So my initial request was to know where I should place that code? Would it be in the custom CCS?
Solution for this topic
To achieve that first please disable the responsive layout option in the theme settings as shown in the attached screenshot.
Then please use the attached small plugin specially developed for you that contains some custom code.
This worked!!
You guys are the best, as always <3
You are most welcome here 🙂
