Hi,
Current at wits end. I wanted to embed an Edge animation into my responsive (Bootstrap 3) project. I managed to make it responsive but there is problem, the containing div's height does not resize according to the new height of the iframe.
desktop view
the mobile view - the yellow orange color represents the holder-div's background so that I can see that it is not resize to the size of the animation.
The desired effect would be below
.myiframe {
position: relative;
padding-bottom: 65.25%;
padding-top: 30px;
height: 0;
overflow: auto;
}
.myiframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The code above is what I used and it is cotained in two more DIVs. From my testing myiframe and iframe resizes as expected however the main wrapper divs hero and hero_slider do not follow the height of the iframe after resizing.
I hope someone can help me with this problem. Thank you.