Jump to content

Typeform embed scrolling issues on mobile view

Recommended Posts

Hello I have embedded a typeform survey in this page

https://www.tearakirihimete.co.nz/the-christmas-trees and it works fine on desktop. On Mobile the form scrolls under the other elements on the page, as soon as you 'start' the survey. It makes it hard for people to actually fill the form and it's very confusing. I'm about to take all other elements of this page but maybe someone here knows if there's a fix? thank you so much

IMG_2508.jpeg

IMG_2507.jpeg

Link to comment

Note, as it's an active page, I've removed the other sections on the page that were scrolling over the form so it's not currently showing the same issue. Hoping I explained it well enough for someone to point me in the right direction. Will post a sample of the previously offending set up when I have a moment.

Link to comment

It looks like you're using Fluid Engine, have you tried adjusting the mobile view? I realise that the embed may not show up correctly, so you'll have to do a little trial and error to get it right. 

Given that I can't see the problem live, it's hard to know if it's something more than that.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

thanks Ziggy for your reply. Signing off for the weekend so am leaving it for now in the simplified version without any other elements on the page. Yes probably Fluid Engine, but have no experience with adjusting the mobile view so will figure that out next!

 

 

Link to comment
9 hours ago, vibeke said:

Yes probably Fluid Engine, but have no experience with adjusting the mobile view so will figure that out next!

Designing the mobile layout is vital to using fluid engine. I can't overstate that. I can't believe that Squarespace don't make this clearer for users, because if you don't edit the mobile layout, the blocks will simply be in the order that you added them, NOT in the order that they appear on desktop, i.e. potentially completely wrong, and that gets worse with embedded elements that don't necessarily size themselves very well.

https://support.squarespace.com/hc/en-us/articles/6421525446541?_ga=2.202662418.2061394284.1670577740-1241793901.1669997276#toc-mobile-layout

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 2 weeks later...
  • 1 year later...

I am having this exact problem here in February of 2024. The integration works great on desktop and on mobile preview it looks fine but on the live mobile site the Typeform is overlapped by the other content on the page, including content that isn't even in the same section. I have edited for the mobile layout and can't see why this issue would be occurring. @vibeke did you ever find a solution to this? Screenshots attached. The issue occurs after I press start.

image.jpeg

IMG_59F20C835D91-1.jpeg

Link to comment
On 2/23/2024 at 10:00 PM, Whirlybird said:

I am having this exact problem here in February of 2024. The integration works great on desktop and on mobile preview it looks fine but on the live mobile site the Typeform is overlapped by the other content on the page, including content that isn't even in the same section. I have edited for the mobile layout and can't see why this issue would be occurring. @vibeke did you ever find a solution to this? Screenshots attached. The issue occurs after I press start.

image.jpeg

IMG_59F20C835D91-1.jpeg

Can you share link to this page? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

Hi everyone, Matteo here from Italy.
I have the same problem: link here https://www.matteocardamone.com/studios-survey#survey
But I didn't understand what's the @Ziggy solution.

All the textes overlap during the scroll on mobile.
Even if I change the order of the block in the section, nothing happen.
I noticed that the problem occurred only when you start the typeform. If you didn't press the start button, everything goes well.


Please help me 🙂

IMG_C69CAA259A54-1.jpeg

Edited by MCarda
Link to comment
25 minutes ago, MCarda said:

All the textes overlap during the scroll on mobile.

It looks like you set up the form block with a sticky functionality just on mobile, was this intentional? Is that the problem you're describing?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Hi @Ziggythank you for the quick response. Unfortunately it's not stick. This is my problem: When you are trying to fill the typeform swiping in the vertical axis, other textes overlapping the form.

Edited by MCarda
Link to comment

I can't replicate that issue, it works fine for me.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.