Page Height with Embed

Support
#1

Hi Guys,

I’m trying to embed a Typeform, using the ‘full-page’ embed code option they provide:

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Project Inquiry Form STEP 1</title> <style type="text/css"> html{ margin: 0; height: 100%; overflow: visible; } iframe{ position: absolute; left:0; right:0; bottom:0; top:0; border:0; } </style> </head> <body> <iframe id="typeform-full" width="100%" height="100%" frameborder="0" src="https://sizzlingdigital.typeform.com/to/h7ornR"></iframe> <script type="text/javascript" src="https://embed.typeform.com/embed.js"></script> </body> </html>

I’ve set the page attributes as: Blank, No Container, No Header, No Footer and also set the Row Inner Container to ‘off’

As you can see, the embed is working at full width, as it should be, but the height of the row/section is oddly very limited… I’ve tried adjusting the overflow: to ‘visible’ in the embed code itself as well… https://pmtvideo.com/get-started

Is there a way to set the page/section/row height to a min? or 100% etc.?

Thanks!

#2

Hey @jonathanrockett,

The iframe (embed code) spans 100% both width and height.

The problem now is that the Column has a width but its height is automatic. That means that it relies on its content to define its height and the iframe does not do that since it’s also relying on the container which is the Column in this case.

The solution is to put the iframe code inside a Map element. For more details about the Map element, please read https://theme.co/docs/map

In the Map element, go to Frame

Then, switch Content Sizing to Fixed Height and set the Content Height to 100 VH

Hope that helps.

#3

That worked great! Thanks so much for the help!

#4

You’re most welcome, Jonathan.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.