Streaming live at 10am (PST)

Need help designing embed component to fit height of viewport


#1

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


#2

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>

#3

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


#4

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


#5

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


#6

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.


#7

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


#8

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:


#9

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


#10

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


#11

Yes . The updated site is live.


#12

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