CODEWITHSUNDEEP
htmlioscssiframebootstrap-4
JohnV
JohnV

Reputation: 285

iframe not responsive on iOS only devices

I might just need another set of eyes on this but I can't see to find what I am missing. Currently I have an iframe that's width goes out far beyond the Boostrap 12 col I set it in and the CSS to keep it responsive. When testing the site I am making, it works fine in all desktop browsers. I was simulating in both Chrome and Safari and it works fine there. But once posted to Github, the page doesn't work the same.

Mind you, bootstrap is 100% responsive in the rest of the site. Everything stays in the columns and adapts. Even when you load the page, you don't notice the iframe until you scroll down to it. But the Jumbotron, Navbar, ect are all okay. I have the this at the top as needed as well.

<meta name="viewport" content="width=device-width, initial-scale=1">

Here is the setup for the iframe. Dont mind my awkward DIV setup. I prefer that instead of multiple class names in the same class="" sometimes.

<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 is the CSS that's supporting the HTML for that frame

.menuwindow {
margin-top: 10rem;
margin-bottom: 10rem;
height: 400px;
width: 1px;
min-width: 100%;
*width: 100%;

Sorry I scratched out who I am working for.

Here is an picture of it in the dev browser looking fine.

image in chrome dev

Here is a picture of it on an iOS device. Another thing to not is, its even jumping out of the container its in because there is no padding on the right side.

UPDATE: I tried to focus on just he iframe instead of the class and it still does not fix the issue.

image on actual iOS device

Upvotes: 0

Views: 3219

Answers (1)

Konstantinos Koletsas
Konstantinos Koletsas

Reputation: 239

Assuming you cannot edit the iframe origin, you can set iframewidth to something smaller than the viewport and then override it.

So, we have something like this

iframe {
    width: 1px;
    min-width: 100%;
    *width: 100%;
}

Upvotes: 1

Related Questions