Iframe not responsive

[tinachapman]

I have a page with an iframe calling in info. I have the width set to 100% in the iframe coding. When I view it on my phone the iframe doesn’t shrink down. It adds sliders but would prefer it to resize.

This is the page with the iframe – http://www.millelacsresort.com/accom/booknow.htm

I also tried adding this custom css but that didn’t work either, reduces down but adds scroll bars which I don’t want.

.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

I would also like the full frame to display height wise, no scroll bar at all.
Thanks!

Topic

[Jason Bobich]

Hello,

I don’t think it’s not that your iframe, itself, isn’t responsive; it’s that not all of the content within the iframe is responsive. Unfortunately (as far as I know), there’s no way to style content within an iframe from the site it’s being embedded from. This would all be controlled from the site the content is coming from.

Specifically, it’s this content I think that’s causing the problems in the iframe:

[tinachapman]

Makes sense. Thanks!

[Author]

Replies