White bars on sides when viewed horizontal on mobile/ background image bounds- how to remove bars and fill with background image?

[whitelobster11]

Hello!

I have a welcome page with a parallax background image at http://www.motherculture.love

Any time that I view the site on my iphone XS max rotated horizontally there are white bars on either side of the content

the background image is set to parallax + pattern but no matter what CSS I put for the way the background is stretched, the white bars are ALWAYS there when viewed horizontally on mobile

How can I fix this so that the background images always fiills the viewport properly even when viewed horizontally on mobile?

login details in the note below

Thank you so much!!

[christopher]

Hi Jared,

This is a behavior of the new iPhones and we and you do not have any choice. The reason behind the behavior for landscape mode is that the new iPhones have a specific top design with two so-called horns on the left and right. To avoid that design to interfere with the website sides iPhone decides to cut back and add extra space.

You can not get rid of that space with the conventional CSS methods and I see the same thing on other websites with my iPhone XR which has the same design.

There is a meta tag that can be used to get rid of that side margins but it is outside of our support scope and you need to customize the theme yourself or hire a developer to do so. Here is more information:

"The Notch" and CSS | CSS-Tricks

Thank you for your understanding.