Mobile embed not displaying correctly | Community
Skip to main content
Answered

Mobile embed not displaying correctly


Hello,

My quiz isn’t displaying correctly on mobile. I’ve tried both selecting “full-screen on mobile” on and off.

When full-screen on mobile is enabled, the questions are cut off at the first line.

When the toggle of the full-screen on mobile is turned off, the questions are displayed but because the number of selectable answers is quite long users need to scroll down and answers are cut off and you aren’t able to select next to go to the next question.

The full-screen has the better user experience, so I would prefer to use that option, but how do I stop the question from getting cut off at the top? 

Thank you!

Best answer by mathio-tf

I see now. This is due to z-index of your header elements. I see you have the following elements covering your typeform with z-index values of:

  • #utility (999999)
  • #main-header (99999)
  • #breadcrumb (99993)

Typeform has z-index of 10001 by default. You can either override the z-index value of typeform element .tf-v1-widget-fullscreen to be larger than z-index of the elements listed above or change z-index of those elements to be lower than 10001.

Hope this helps.

 

View original

6 replies

Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15018 replies
  • March 25, 2024

Hi @Elloem Thanks for stopping by the community. Do you mind sharing the URL where your form is located so we can take a look and a screenshot/video of what you’re seeing? 

Thanks in advance!


  • Author
  • Explorer
  • 2 replies
  • March 25, 2024

Hi Liz, here is a preview page with the form: https://www-dev.athabascau.ca/support-services/program-and-course-advising/education-and-career-planning/career-quiz/career-quiz.html

This embed is with the full-screen mobile enabled. Thank you! 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 15018 replies
  • March 25, 2024

Thank you, @Elloem ! I think this might have to do with the container the embed is placed in, but @mathio can help confirm!


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • March 26, 2024

Hi @Elloem 

yes I agree full screen provides better experience to respondents.

Can you please share a screenshot of how you see the form on mobile device?

This is what I see on my phone. The last option appears to be readable and fully clickable:

iPhone SE 2022

 


  • Author
  • Explorer
  • 2 replies
  • March 26, 2024

@mathio Thank you for reviewing it. The issue is with the top line of the question being cut off on first load. The question is suppose to be “What are some of your key interests?”.

 

 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • Answer
  • March 27, 2024

I see now. This is due to z-index of your header elements. I see you have the following elements covering your typeform with z-index values of:

  • #utility (999999)
  • #main-header (99999)
  • #breadcrumb (99993)

Typeform has z-index of 10001 by default. You can either override the z-index value of typeform element .tf-v1-widget-fullscreen to be larger than z-index of the elements listed above or change z-index of those elements to be lower than 10001.

Hope this helps.

 


Reply