Can someone take a look at this for me? I can't seem to figure out what's missing. I have an iframe with a width that extends beyond the Bootstrap 12 col I placed it in, despite setting up CSS to make it responsive. The site works fine in desktop browsers like Chrome and Safari during testing, but once it's posted on Github, the page doesn't function the same way.
It's worth noting that Bootstrap is fully responsive elsewhere on the site. Everything stays within the columns and adapts accordingly. When you load the page, you don't even notice the iframe until you scroll down to it. However, the Jumbotron, Navbar, etc., all work fine. I also included the necessary meta tag at the top.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's how the iframe is set up, ignoring my unusual DIV structure:
<div class="container">
<div class="row">
<div class="menu">
<div class="col-xs-12">
<iframe class="menuwindow embed-responsive-item" src="https://docs.linkhere"></iframe>
</div>
</div>
</div>
</div>
And here's the CSS supporting the HTML for the frame:
.menuwindow {
margin-top: 10rem;
margin-bottom: 10rem;
height: 400px;
width: 1px;
min-width: 100%;
*width: 100%;
I've blurred out the identity of who I'm working for.
Here's a screenshot of it looking fine in the dev browser:
https://i.sstatic.net/QdpoK.png
And here's a picture of it on an iOS device. Notice how it's spilling out of its container due to lack of padding on the right side.
UPDATE: I tried focusing on just the iframe without altering the class, but the issue persists.