iFrames and responsive design

[ikandee]

Just a quick question - I have a couple of different iFrames (containing external content) within a responsive layout and am wondering how do I get around the problem of the iFrame not scrolling/interacting in the mobile/tablet breakpoint?
Example link

[Paul O'B]

Hi,

If you mean the actual content inside the iframe then you can't change that content as it doesn't belong to you

The only way to change the style of the html in an iframe is by adjusting the css in the page that the html belongs to. An iframe is basically a window that lets you see outside your site. You can't change the view by changing the window.

If the iframe content is hosted on your own site and you have access to the css then you would need to design the page in a responsive manner so that it fits the viewport accordingly.

[ikandee]

Hi,

If you mean the actual content inside the iframe then you can't change that content as it doesn't belong to you

The only way to change the style of the html in an iframe is by adjusting the css in the page that the html belongs to. An iframe is basically a window that lets you see outside your site. You can't change the view by changing the window.

If the iframe content is hosted on your own site and you have access to the css then you would need to design the page in a responsive manner so that it fits the viewport accordingly.

Hi Paul,
Sorry I think I may not have been clear in my question - I am aware that the content in the iFrame belongs to a third party, what I meant was when you view the page on a mobile screen - the iFrame scrollbars are not visible and therefore the user can not even scroll the content within the iFrame left/right/up/down. Is there something I can do so they can? Thx.

[ronpat]

ikandee, when I reduce the size of my desktop screen to mobile size, the iframe's scrollbars are still present. Is this what you see, also? In which mobile devices are the scrollbars not visible?

[ikandee]

ikandee, when I reduce the size of my desktop screen to mobile size, the iframe's scrollbars are still present. Is this what you see, also? In which mobile devices are the scrollbars not visible?

It seems to be happening on the iPhone and iPads... (blackberry and andriod are ok)

[Paul O'B]

Hi,

As far as I know the iphone doesn't show scrollbars on any internal elements and to scroll inside an overflow div you need to use a two finger swipe. There is a script called iscroll which should address the issue although I;ve never used it.

[ikandee]

Hi,

As far as I know the iphone doesn't show scrollbars on any internal elements and to scroll inside an overflow div you need to use a two finger swipe. There is a script called iscroll which should address the issue although I;ve never used it.

Hi Paul - thanks I will take a look through it.