iPhone X Landscape Compatibility

[not-enough-yet]

Due to the provision Apple made for the iPhone X notch, all websites have white margin bars added to them when in landscape mode. Please add viewport-fit=cover to the <meta> tag to fix it.

[not-enough-yet]

Just to clarify and follow up on this issue I am attaching visuals.

This is what it looks like at the moment:

This is what it should look like:

[nuritsha]

Hi @not-enough-yet,

Please check the next version of the theme, it will include a new filter designed to address your request.

Thanks!

[not-enough-yet]

@nuritsha,

Thanks for the help! I can't seem to get it to work. Could you explain how to add viewport-fit=cover to what already exists? Also shouldn't this change be added to the code as the default?

Thank you!

[nuritsha]

Hi @not-enough-yet,
To use the new filter you need implement it in your child theme's functions.php.
You can use this snippet as inspiration:

function my_viewport_content( $content ) {
   $my_viewport_content = 'viewport-fit=cover';
   // if you need any of the default settings use the following (note the comma separator):
   // return $content .  ', ' . $my_viewport_content;
   // if you need only the new settings, use this:
   return $my_viewport_content;
}
add_filter( 'hello_elementor_viewport_content', 'my_viewport_content' );

[ramiy]

You can also add your own meta tag to override the previous meta tag:

function custom_viewport() {
    ?>
    <meta name="viewport" content="viewport-fit=cover"
    <?php
}
add_action('wp_head', 'custom_viewport');

[philmatt]

+1

I would like better iPhone compatibility without the need to create a child-theme. Is that possible with Hello Theme?

[noisybird]

Hi @not-enough-yet,
To use the new filter you need implement it in your child theme's functions.php.
You can use this snippet as inspiration:

function my_viewport_content( $content ) {
   $my_viewport_content = 'viewport-fit=cover';
   // if you need any of the default settings use the following (note the comma separator):
   // return $content .  ', ' . $my_viewport_content;
   // if you need only the new settings, use this:
   return $my_viewport_content;
}
add_filter( 'hello_elementor_viewport_content', 'my_viewport_content' );

Hmmm, thanks, but it also modifies the design in portrait mode, it does not only affect the landscape mode of the iPhone X. The header becomes all tiny in portrait mode.