I’ve created an interactive 360 spin that I’d like to include in my site. I do this with an HTML stack and the iframe code and it works. However, for these 360 spins to be visible, I need to set the top padding in the HTML code to something like 65%. As soon as I do that, it trickles down to every foundry stack on the page, giving me a top padding of 65% on every subsequent foundry stack. I assume there is something in my code that I’m not doing right, but it also seems to be something about Foundry. Any non-foundry stacks that I add to the page do not have the extra padding. It is only the Foundry stacks that end up distended.
Please help! My iframe code is quoted below. I know it is the top padding line because if I eliminate just that line the problem goes away. But I need that line to see my interactive. Maybe I’m out of my depth working with iframes, but I need it for this site.
.container { position: relative; width: 100%; overflow: hidden; padding-top: 75%; /* 4:3 Aspect Ratio */ }.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}