[Support request] Issues with with viewport on mobile in landscape view

Home Forums Support [Support request] Issues with with viewport on mobile in landscape view

Home Forums Support Issues with with viewport on mobile in landscape view

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1597821
    Pierre

    Hello guys,

    I need help to fix my sites built with Generatepress to work nicely with the viewport on Mobile. Can you help to fix these issues?

    1. In landscape mode in Mobile Chrome the entire page slips to the side easily and leaves whitespace on the sides.
    2. In landscape mode in Mobile Safari it automatically leaves space on the sides. Hows the tabs from other open pages in Safari. Preferably the background colors and everything would extend all the way out to the sides.

    Safari generatepress issue

    Chrome generatepres issue

    //

    #1598006
    David
    Staff
    Customer Support

    Hi there,

    this article explains how:

    https://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

    For the viewport setting you can use this PHP Snippet:

    add_filter( 'generate_meta_viewport', function() {
        return '<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">';
    } );

    And then to adding the padding to the main elements try this CSS:

    #page, #mobile-header, #site-navigation, .site-footer  {
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-sizing: border-box;
    }

    However i am not sure what impact this will have on other browsers – so be sure to check carefully.

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