Answered

Mobile embed not displaying correctly

  • 25 March 2024
  • 6 replies
  • 37 views
E

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!

icon

Best answer by mathio 27 March 2024, 11:09

View original

6 replies

Liz
Rank
Userlevel 7
Badge +5

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!

Life is a series of awkward moments separated by snacks.
E

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
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

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

 

E

@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
Rank
Userlevel 7
Badge +5

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


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs