Problems inserting HTML stack

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;

Your custom code uses a class name that Foundry uses heavily. This is why you’re running into this problem.

Is that “container”?

Sorry, I’m out of my depth. Can you advise on an alternative phrasing?

Yes, the container class is used quite often in Foundry.

I’m not sure what you mean by alternate phrasing. As for custom coding – that isn’t a service I provide. I am sorry.

Thanks Adam.

In case anyone else is interested, I changed container to section and it worked. Happy to hear suggestions from anyone if they can think of a more appropriate way.

You can give any stack stack a custom class name. Like “myContainer” then use .myContainer In your code. Every stack has it built in under HTML /CSS classes.

1 Like

Hey. That works too. Thanks. Now if I can just get the iframe to center in the margins stack?