Answered

Typeform - Divi - Mobile issue

  • 11 January 2023
  • 7 replies
  • 68 views


I'm trying to embed my type form on my website. As you can see, this works beautiful on Desktop at: https://ztxadvisors.com/contact-us/

However, when I try to view the same page on mobile, if you visit the same link (https://ztxadvisors.com/contact-us/) the form doesn't show up. Can you please help? 
 

icon

Best answer by mathio 12 January 2023, 11:53

View original

7 replies

Userlevel 7
Badge +5

@mathio may be able to help with this one!

I know Divi allows for certain views on desktop/mobile which may be the cause, but he can help me confirm what the issue is. 

Userlevel 7
Badge +5

I see there are other elements obstructing your typeform. You can try using data-tf-inline-on-mobile attribute (see this help article).

We are aware of the limitations of embedding typeforms on some websites due to conflicting CSS or other elements. We are currently working on improving the mobile experience and resolving the conflicts for additional cases.  Thank you for reporting this issue, we will try to include a fix for your case too.

Was this ever resolved? I am using Divi too and tried the data-tf-inline-on-mobile suggestion but it did not solve my problem. My typeform does not let the user scroll correctly all the way down to the end of the page on the mobile version: https://jamielynntatera.com/feelings-habit-animal-quiz/

 

Please advise.

Userlevel 7
Badge +5

Hi @Ada2023 ,

the issue you are facing is specific to the CSS used on your website. Sometimes other elements can be displayed over.a typeform and there is nothing we can do to affect this behavior (sometimes it is even something our customers want).

In your specific case, I tried adding this CSS to your footer.et-l.et-l--footer and it seems to have resolved the issue:

z-index: -1;
position: absolute;
width: 100%;

Can you please try this?

Where do I find my footer.et-l.et-l--footer file? I don’t have a child theme. I have just been using the additional CSS to add any custom coding. I tried adding it there but it didn’t work. What am I missing? Thanks!

Userlevel 7
Badge +5

Try adding this to your additional CSS 🤞

footer.et-l.et-l--footer {
z-index: -1;
position: absolute;
width: 100%;
}

Hope this helps.

This worked! Thank you, so much, Mathio for your assistance (and patience). 

Reply