Iframe width not staying in viewport

Support
#1

Hello, I have several Iframed forms on my website. For some reason they are not staying in the viewport on my phone but I do not seem to have any issues within the PRO editor as it shows fine there. I have tried several times to fix it using HTML and CSS based on media. Can you help? the pages are:

http://staging.tlvbiblesociety.org/tlv-verse-of-the-day-widget
http://staging.tlvbiblesociety.org/give-now

Thanks!

#2

Hi,

Thanks for writing in!

You can try adding this in Theme Options > CSS

.entry-content iframe {
    width:100% !important;
    height:auto !important;
}

Hope that helps

#3

That did not work. Please help. This is important.

#4

Hi @jgreenberg,

Would you mind providing a screenshot? What I’m seeing is height issue since your entire content is within the iframe. It could only respond with the width, no height. Height depends on the content and aspect ratio.

There is no possible solution for this but moving the content of your iframe within the page itself. Please note that the more it became narrow, the more the height became taller. And there are many devices with different width, height varies too so there is no absolute solution.

Unless you can do customization within an iframe and communicate it with the parent window, and tell the parent of the actual height, then the parent will set the height matching the iframe content’s height. The problem is, the browser will not allow that. It’s cross-domain communication and browser blocks it.

Thanks!

#5

#6

Hi Joseph,

I can not replicate that issue on my end, the CSS code provided by Paul’s above already address that.



Please clear your mobile phone browser’s cache.

Please keep in mind that even though we can style the <iframe>, we can not style the elements that is inside it, especially if it is coming from outside of your domain.

Thank you for understanding,

#7

Well the CSS provided earlier created issues of being cut off height wise on the desktop and still doesn’t resolve mobile issue. What I may need to do is duplicate the form and restrain it based on pixels but only have it show up on mobile and hide it on the desktop version and vice-versa.

#8

Hi @jgreenberg

Customizing the iframe height based on its content height is impossible when its source is different that the main domain, if you are loading the iframe on the same domain, some suggestions mentioned in this thread will help:

I’m not sure I can understand your workaround, could you please elaborate more details about it?

Thanks.

#9

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