Prevent overlapping phone icons on an iPhone X.

Prevent top icons from overlapping the phone’s icons on an iPhone X.

Use the code below to prevent the top icons from overlapping the phone’s top icons on an iPhone X.

1) Log into your App Manager and select your app.

2) Click Colors from the left-hand-side of the screen (or the middle of the screen).

3) Scroll down to the Advanced SCSS box.

/*** BEGIN: IPHONE X TOP ICON OVERLAP FIX ***/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) {
.platform-ios11{
ion-header-bar.bar-custom.bar.bar-header {
top: 25px;
}
}}
/*** END: IPHONE X TOP ICON OVERLAP FIX ***/

4)Click Save.

IMPORTANT NOTICE: If there is already code in the advanced SCSS box, do not remove it. Start a new line “after” the last character in the box, then paste the above code.