Streaming live at 10am (PST)

Iframe embed height cuts off and adds vertical scrollbar


#1

Hi, Folks - I am trying to do a simple embed of a third party page inside of one of our pages using an iframe but the vertical height keeps getting cut off way too short and a vertical scrollbar appears. I need the entire height of the embed to show and not get cropped off or show a scrollbar. The third party page is fully responsive and we’re both https (so no issues with that). I am not sure what is causing the problem and could use your help.

See video of behavior here

My Steps so far:

  1. I used the Embed component to add the following HTML block of code:
    <iframe width=“100%” height=“100%” src="https://www.giftofcollege.com/purchase-gift-card/az" scrolling=“no” frameborder="0" allowfullscreen ></iframe>

  2. I gave the iframe a class and set it to Flex Vertical with a Width of 100% and Height of 100VH. The iframe is nested inside of a div, which is set to block and has a max width of 1200px and height of 100VH, which is then inside of a Section that is set to block with Width and Height set to Auto.


Published Link: https://redeemcollegesavings.webflow.io/iframe-test
Read-only link: https://preview.webflow.com/preview/redeemcollegesavings?preview=fbb1a4385db79e33dd9275664139c01b


Again, I appreciate any help! Thanks so much!


#2

Those are invalid quotes, so they become part of the value like this:

Screenshot_2017-09-27_100955


#3

Hey @samliew - that was it!!! Curly quotes were the culprit indeed!

Thank you so much!