How to make iframe edge to edge?

Hi, guys, I am trying to make iframe edge to edge but I can’t. I am using Foundry and all add-ons. I create a container and added a 1 column then add an HTML stack. Paste the iframe link inside the HTML stack and so far everything ok. I made this responsive also little HTML and CSS which I don’t have full experience with HTML/CSS. But can’t make it edge to edge? How can I do that? Any suggestion would be nice. Thanks.

Here is a sample…I am a foundation guy…
and I used @joeworkman offsite stack…
http://www.ibize.com/offsite
Be aware that some https sites can’t be viewed inside of non-secured sites…and vis-versa.
But you can do an offsite page in a new window and when it is closed…you are right back at your page!

1 Like

You probably don’t need a container stack. Usually that’s used to restrict the width of your content. If you leave that in place, then make sure it’s set to “fluid” and “remove left and right padding” is checked.

Troubleshooting something like this is easier with a link to the page. We are then able to see exactly what is preventing it from being full width.

You could try pulling the HTML stack outside the Container and Column stacks and see if it’s full width. If it’s not, then it’s likely something with the responsive iFrame code.

1 Like

Sorry guys I forgot to mention what I am trying to achieve exactly. I am trying to make Google Map with iframe. I made it edge to edge and also responsive. But now my problem is when I check on the mobile preview it looks so small; is it possible to set height in mobile previews?

I used these settings;

.map-responsive{
overflow:hidden;
padding-bottom:30%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

This is the look from the desktop;

And this is from mobile;

As you can see mobile version height is so small. What can I do for this?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.