x

iframe not scaling on mobile iOS

I've got an iframe insterted using the code block, and it scales appropriately on a desktop, but when viewing on mobile — especially iOS — does not scale down. Any idea how to fix that? 

Here is my iFrame code:

<div class="animationWrapper">
    <iframe src="http://rdi-staging.com/reliant/Both_Worlds.html"></iframe>
</div>

<style>
.animationWrapper{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.animationWrapper iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
border: none;
}
</style>

And a link to the page:

http://www.joinreliant.com/test.html

2,186 Views
Message 1 of 4
Report
3 REPLIES 3

Hey there! It looks like the content is scaling currently. Is there a particular device you're seeing that on, or has it cleared up since the initial post?

2,174 Views
Message 5 of 4
Report

I'm still having issues on an iphone 6 through Safari and Chrome as well as iPad Air 2, Safari and Chrome.

I've attached a screen grab from the iphone:

image

2,172 Views
Message 5 of 4
Report

Sorry for the trouble, I haven't been able to get the issue to appear here yet. I'm no coder myself, but someone experienced with frames might be able to isolate the issue better for you, as it looks like you have everything in the editor done correctly.

2,113 Views
Message 5 of 4
Report