Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
  • #905831

    Hi there,
    is there any timing given when iPhone X (especially landscape) will be supported properly?



    Thanks for contacting us!

    Could you please post a link to your website and a screenshot showing the issues you are having? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)

    Best regards,


    I have a X and am not having any issues… is there something I’m missing?



    I do not have one but i checked using Chrome simulator and did not see anything wrong there as well.



    Hi Yigit,

    thanks for your reply and sorry for the delay.
    What I’m talking about is especially visible in landscape mode.
    The safe areas on the left and right side will simply remain black instead of extending the background color to the edges.
    This behaviour is consistent on all kriesi sides, also this one.

    check out this documentation:

    Please compare your side or themes to http://www.apple.com on iPhone X in landscape.
    I think it would be worth if this get fixed once in the themes and not every user had to do it on their own.



    Hi Ben,

    Can you please clear the cache on your iPhone X and post some screenshots of the issue?

    Best regards,


    I’d like to post a screenshot here but I don’t see a possibility to attach it!



    You can upload screenshots to a service like google drive, dropbox, imgur etc. and then link to it here.

    Best regards,

    • This reply was modified 6 years, 2 months ago by Rikard.

    here’s a link to the screenshot of this forum.
    The issue you can see on the left and right side is also true for all enfold themes. I think it can be fixed as described in the document I shared earlier.



    The issue is because of ” Notch “, that iPhoneX has ( the top frame ).
    Dev tools do not recognize it yet, as per ticket ( https://chrome.google.com/webstore/detail/inotch-x/ehmeeafggnjdbaodfknmobdjncndipnc ).

    There are 2 different solutions.
    An advanced solution for you, but the safest and the best is to use

    You can go a step further an understand completely what is happening with the codepen here

    A quick way to find a ” hack ” is to use

    body {
       padding: 12px;
       padding-left: env(safe-area-inset-left);
       padding-right: env(safe-area-inset-right);

    and also

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


    • This reply was modified 6 years, 2 months ago by Basilis.

    Here is a screen shot of this thread on my iPhone X. I do not see any bars in landscape or portrait mode:


    You might hard reset your phone and of course make sure it’s updated to latest ios. Enfold sites also fill the screen on my X.



    Thanks for your input Rob :)

    Best regards,


    @golgengate415 well yes that is obvious because the notch does only lead to issues with webpages in landscape (you posted a screenshot of it in portrait mode)
    It will also be visible if you’re running a webpage as a web app and hence have no Safari top and bottom bar. A webpage that doesn’t handle the safe insets will have a black bar on top (position of the notch) because it doesn’t handle the safe insets!

    btw: it’s not required to hard reset your iPhone, you can simply reload a page without caches if you long press on the reload icon in the address bar in Safari.


    Oh yes, now I see “the bars” which I had not really noticed before…. and now I can see nothing else…. :)


    😃 haha
    I think it is possible to “fix” this quickly for single users of the enfold themes.
    But the better solution would be a fix in the enfold theme itself. This way it has only to be done once (and for all users)


    Yes I agree. I try not to introduce too much custom code / patching in my child theme or css files that might break later as future updates are released. Hoping that this can be added to a future Enfold update. Having said that, the black background bars currently showing are OK with me. Even Amazon’s website handles the notch with a different color (grey bars).

    Sorry to crash the thread… very informative, however.



    Has Basilis’ post helped? :)

    Best regards,


    @Yigit sorry but I currently don’t have the time to implement it for my side.
    I was hoping for an update for the enfold theme.
    I will a) have to wait for an update or b) find some spare time to do it myself…

    Thanks for asking though



    We have reported the issue to our developers – but to be honest we do not believe thta this is a bug, but basicly it is based on the view each developer want it to be.
    In any case, we have raised it as an issue.

    Also, it does not require time, it is 2 lines of code and a meta…

    Best regards,

Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.