I am struggling to make an iframe responsive as I'm still seeing scroll bars on two sides and the interactive image isn't adjusting properly...
It appears that the interactive HTML, which includes a map with hover states/pop ups, was created using an Adobe product
This is where the iframe is located:
<div class="resp-container"><iframe class="resp-iframe" title="Sample" src="sample.html"></iframe></div>
Below is the CSS being used:
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
display:block;
}
Could someone please advise if there's an obvious mistake in my implementation? When I change the height to 'auto,' the iframe inexplicably shrinks to 150px even though the canvas is supposed to be 800px
Thank you for any assistance in advance