The same quiz also doesn't show up well on a phone - it just loads in the top half of the screen when in portrait mode, and you have to scroll within

The same quiz also doesn't show up well on a phone - it just loads in the top half of the screen when in portrait mode, and you have to scroll within a tiny box, even when I set it up in a card format.

I was wondering if there's likely a switch I need to flip or something to fix this, or if it's a bug on the backend that y'all could help me fix.

Thank you for your time, and let me know if you need more information!

Hi Lauryn,

Since you are already using the iframe embed method, the issue is most likely caused by the website container or CSS restrictions on the page where the form is embedded, not the form itself. The Card Form layout is responsive by default, so when it displays fine on the direct form link but not on your website, it indicates that the embed container is limiting the form height. To fix this, you can try the following steps:

1. Update the iFrame Height on your embed code, and change the height to a larger value (e.g., height="1600px") so that the entire form is visible on mobile screens.
2. Check the Parent Container, as the iFrame is placed inside a div on your site (e.g., avia_codeblock). If this container has fixed height or overflow settings, it can restrict the form display. Update it to allow flexible height (height: auto; overflow: visible;).
3. Try the Default Embed Script. Instead of the plain iframe code, you can try the default Jotform Embed script. This script auto-adjusts the form height dynamically and usually prevents the scroll-box effect on mobile. Check out our guide on How to Embed a Form on a Web Page to learn more.
4. Confirm with a direct form link by opening your form directly on mobile using this link. If it displays correctly there, then the problem is only with the website embedding.

Give it a try and let us know if you have any other questions.