Iphone X/10 landscape issue

Hello I’m having an issue with the full site no being full width once viewed in landscape mode on iPhone X

Hi Mark,

I do not have any iPhone X so I can not test this. Could you please refresh the page? Maybe you are just having a caching issue. You may use private browsing mode and test your site again.

Please let us know how it goes.

Yes I tried again with no success :frowning:

Hello Mark,

Does the issue happen in the portrait mode? If you have any other phone, please check it as well.
I have tested your site in an android phone and I could not replicate the issue.

Hope this helps.

Yes the issue is in portrait orientation

Hey Mark,

Here’s your site in portrait mode.

Please test your site with another phone and maybe share the screenshot with us.

I wonder if it’s because the notch ?


I’m at work and have check many ppls phones but it seems its the notch issue?
i have not tried an android notched screen phone yet

oh and i made a mistake. the issue is in landscape

Hi Mark,

It’s iPhone X specific feature due to its design, it can only fill the safe area unless forced to. The solution is adding this

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Please check these first about the editing required to implement this
https://theme.co/apex/forum/t/customizations-best-practices/205,
https://theme.co/apex/forum/t/how-to-upload-xtheme-to-child-theme/43246/2,

With that, you’ll be working on file /framework/views/global/_meta.php and change this line

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to this

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

This fixes it on iPhone X, replacing that lone will surely affect other mobile phone’s view. A new standard imposed by iOS just because of the way the device is designed, like a curved corner and inset bezel. More information here https://webkit.org/blog/7929/designing-websites-for-iphone-x/

Thanks!

ok i think i did it correctly however no go

?

Hi Mark,

I checked your site’s code and it still the old one.

Perhaps you’re editing the files of another site? Please provide the admin login credentials in the secure note and I’ll check.

Thanks!

Summary
Summary

the file was in the wrong folder lol

it works now

thanks

what other items might be affected ?

Glad it works now, I’m not sure about the effect on other devices. But it could be the sizing of the size on other mobiles, or maybe not. This feature is specific to iPhone X.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.