Need help designing embed component to fit height of viewport

I’m using an iFrame custom code on my site and for some reason the responsive feature doesn’t auto size the height to fit the content. Instead it brings up scroll bars, but doesn’t scroll on mobile. I’d like it to auto fit the content on any device without needing to scroll. Can’t figure it out. Any ideas

Here’s the site section in question: http://vimola.webflow.io/#Reservations

You’ll need to set a different height for the iFrame element on Mobile, can you send over a preview link?

Here is the easiest way to enable the touch scrolling. I utilize it on this cloneable example I made here: https://webflow.com/website/Responsive-Iframes

<style>
.iframe-holder {

width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.iframe-holder iframe {
  height: 100vh;
  width: 100%;
}
</style>

<div class="iframe-holder"><iframe src="http://www.springfieldskateproject.com" seamless frameborder="0"></iframe></div>

Hi, thanks for the reply. What type of “preview” link would you like to see? Is there something different other than a link to the page in question?

Also just noticed that even on the desktop view if you click the words “Location” in my iFrame the content doesn’t fit and the scroll bars come up. So no version of the responsive iFrame auto-sizes to fit the content. Hope what I’m saying makes sense. Here’s the link again http://vimola.webflow.io/#Reservations

Also, I failed to mention that changing the height in the iframe source code has no effect on page.

http://forum.webflow.com/t/how-to-enable-a-webflow-share-link/a2573

I would honestly put your iFrame in a div with the height of that div to 100vh, and width to 100vw.
Then in your iframe, set the height=“100%” width=“100%”. That will put it at 100% of the View Height/View Width.

With it being an iframe that’s my recommendation of how to add it in.

2 Likes

Hi @Waldo_Broodryk , I really appreciate you taking the time to give me ideas. I still can’t get this to work. I’m certain it’s user error. Can you give me an example of what the code would look like?

Here is the link your requested: https://preview.webflow.com/preview/vimola?preview=c66653647656bf1815f4383824ce4f1b

Here you go @meetdion
https://webflow.com/website/responsivefullwidthiframe

All you do is add a section, then give it a class of with 100vh, 100vw. Then embed the iframe as I have shown. (literally can copy and paste that out of the embedded piece.

Please let me know if you have any questions. :smile:

1 Like

You are awesome! Thank you for your support on this. Problem solved.

1 Like

My pleasure, anytime! :slight_smile: Did you update the live site yet?

Yes . The updated site is live.

1 Like

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