iFrame width is not responsive in iPhone X

Question

When i click on the portfolio link, it will create an iframe lightbox content. I have noticed and inspected the element and apparently the iframe width is not following the css styles, the iframe width was overflow out from div. Below is my test link.

https://wind-dance.com/geopancar/portfolios/

I seriously have no idea why iphone is so different with other devices as those are working fine.

Appreciated everyone helps here.

[EDIT 1] I tried using simulator to check iPhone issue. Here is the screenshot. Notice the width and height size is wider than the device size. I am using Android phone and everything is looking fine.

[SOLUTION]

I have found a solution here. Apparently its a css issue on iframe rendering.

see this trend: https://stackoverflow.com/questions/46313640/iphone-x-8-8-plus-css-media-queries — Moses Villamor, Sep 26 '18 at 07:30

Komal R · Answer 1 · 2018-09-26T06:24:09.670

0

I checked out the link and it seems fine to me. Can you mention exactly where you are facing the problem? On which page? And also share the code for it so we can see where the problem is.

EDIT 1: Try adding media query for iPhone X like this:

@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3) {

  }

You can set the height and width of the division tag and iframe in here. I haven't tried this, let me know if it works.

edited Sep 26 '18 at 06:24

answered Sep 26 '18 at 04:45

Komal R

387
2
16

can you check my post edit? I have added screenshot for better understanding. – Wai Mun Sep 26 '18 at 04:56
Can you navigate to Portfolio page, click any of the projects, it will display a lightbox loading the iframe content. That is where the problem is. – Wai Mun Sep 26 '18 at 05:21
Try adding media query just for iPhone X. Check my edited answer. – Komal R Sep 26 '18 at 06:22
1

Thanks for your solution but that's not the solution for my problem. – Wai Mun Sep 26 '18 at 15:28

score 0 · Answer 2 · answered Sep 26 '18 at 07:32

0

you can use this..

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { }

answered Sep 26 '18 at 07:32

Moses Villamor

1
2

iFrame width is not responsive in iPhone X

2 Answers2