Ionic 4 - iPhone X Notch display issue

In one of my components, the ion-content element isn’t using any padding. The component template is just a bunch of divs. It runs well on Android (Galaxy Note 9 and S8+) but while testing on the iPhone X, the notch seems to partially obstruct the view of a divider with some text.

In other components, I’m using the toolbar UI component and I’m not having the issue as the toolbar is automatically placed in a manner that moves out of the way of the notch.

How do I make it so that a component template that is made up of just dividers does not have any divs interfering with the notch, or in other words, how do I make it so that all the divs move downwards a little so as to not come in contact with the portion of the screen that is used by the notch?

Thanks so much!!!
I’d be happy to provide screenshots if requested.

1 Like