4

I have added an iframe and it is working fine in all browsers and some devices but in iphone 6. The iframe is not responsive. It does not fit 100% of iphone screen size.

I found many solutions online but most of them showed how to make an iFrame scroll in iphone. I dont need that. I want to make it responsive and adjust according to screen size.

<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>

I have removed the src="" in iframe in the sample above

enter image description here

From the screen shot it can be seen that the iframe is not responsive and a horizontal scroll appears. During loading the iframe is according to the devices viewport but once it is fully loaded the iframe takes the full width and the horizontal scroll appears.

Checking on browser stack

Muhammad Ameen Sheikh
  • 412
  • 2
  • 4
  • 14

1 Answers1

7

This problem is solved, simply had to apply this styling. I did an inline-css to this.

 width: 1px;
 min-width: 100%;
 *width: 100%;

Here is a link to a more detail answer

Community
  • 1
  • 1
Muhammad Ameen Sheikh
  • 412
  • 2
  • 4
  • 14
  • Note that as pointed out in the linked answer, the `*width: 100%;` is only for IE6 compatibility, heaven knows why someone would care for that today. – DRosenfeld Feb 10 '19 at 09:43
  • for anyone facing this later - for me this was fixed by setting width:0px; (NOT 1px) – Samih A Dec 18 '20 at 11:21