Typeform display problem on mobile | Community
Skip to main content

Hi !

As you can see on the screenshots, I have a problem with my typeform on mobile, the form is displayed correctly before you start the form, but then you can see that the size change and it overflows on the right outside the margins. I use a wordpress website with Divi.

Thanks for your help.

 

Hi @MathieuMic 

can you share the link to your embedded typeform? You most likely have some CSS that conflicts with typeform CSS. I can have a look.

Hi @mathio,

Here is the link : https://pac-subventions.fr/ 

Thanks

You are overriding our default CSS and that broke your embed:

.tf-v1-widget-fullscreen {
    position: relative!important;
}

If you want to display your embedded typefom inline, you can use data-tf-inline-on-mobile option in your embed code (see “Embedded typeforms on mobile” at the end of this page).

Thanks it worked, but now I have an other issue, as you can see on the screen the “OK” button is appears on the middle of the screen, any way to correct this please ? 

Thanks

I can see it like this, which is expected, I think:

 

 

Yes but when you scroll down the OK button is moving up on my phone, I tried Safari and Chrome

I can not replicate that on an iPhone in Safari, sorry.

Thanks it worked, but now I have an other issue, as you can see on the screen the “OK” button is appears on the middle of the screen, any way to correct this please ? 

Thanks

Hello mathio, 

 

Is there a way to remove this OK button in the middle of the screen on mobile? 

Hello @lyagaya , you can not remove that button.

However it seems like there might be some issue with the alignment and position of that button. Can you please share URL of the page with your typeform? I will have a look.

Hello @lyagaya , you can not remove that button.

However it seems like there might be some issue with the alignment and position of that button. Can you please share URL of the page with your typeform? I will have a look.

Hello @mathio , I have three typeforms embedded:

https://explorink.lt/mini
https://explorink.lt/standartinis
https://explorink.lt/be-rupesciu

Also, before embedding I selected the “full screen on mobile” option, but it doesn’t come up as full screen on mobile. The code is:
<div data-tf-widget="MRUN08lq" data-tf-opacity="100" data-tf-iframe-props="title=Mini planas" data-tf-transitive-search-params data-tf-disable-scroll data-tf-auto-resize data-tf-medium="snippet" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

I (or someone else from the responsible team) will get back to you on the “OK” button.

As for the “full screen on mobile” option - I see you are not placing the embed code directly into your website, but it is wrapped inside another <iframe> tag:

<iframe class="grid-embed__iframe" srcdoc="<!DOCTYPE html>
	<head>
<style>
	html {
		overflow: hidden;
	}

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
 	}

 	iframe {
 		max-width: 100%;
 	}
</style>
</head>
	<body> <div data-tf-widget=&quot;MRUN08lq&quot; data-tf-opacity=&quot;100&quot; data-tf-iframe-props=&quot;title=Mini planas&quot; data-tf-transitive-search-params=&quot;&quot; data-tf-disable-scroll=&quot;&quot; data-tf-auto-resize=&quot;&quot; data-tf-medium=&quot;snippet&quot; style=&quot;width:100%;height:600px;&quot;></div> <script src=&quot;//embed.typeform.com/next/embed.js&quot;></script></body>
</html>" title="custom code element"></iframe>

If you do this, the typeform will be always constrained inside this iframe. When it tries to open in a popup and resize to full screen it is limited to the size of this iframe and will not cover the rest of the page. If you can place the code directly into your page, not the iframe, it should work as expected.

Hi, I was told by the respective team (and I also confirmed on iPhone) that the “OK” button position was just fixed.

Hi, I was told by the respective team (and I also confirmed on iPhone) that the “OK” button position was just fixed.

I’ve just dev tested my first Typeform survey and I’m still getting the “OK” button appearing on iPhones using both Chrome and Safari (those I’ve tested). My test responses do require a scroll down to be able to see/select some options. Most of my multiple choice questions only have single choice and the survey is automatically moving forward to the next question.  Is there anything specific I need to change to remove this OK button?

It is by design to have the “OK” button in your form. My comment was regarding the bug of incorrect position of the button at the time.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs
OSZAR »