CODEWITHSUNDEEP
htmlioscssiphoneiframe
Muhammad Ameen Sheikh
Muhammad Ameen Sheikh

Reputation: 422

How to make iFrame responsive in iPhone 6?

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

Upvotes: 4

Views: 10344

Answers (1)

Muhammad Ameen Sheikh
Muhammad Ameen Sheikh

Reputation: 422

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

Upvotes: 7

Related Questions