IONIC 4 - iPhone X CSS issues

Ok so since my landing page for the app has no padding for ion-content (this is necessary), I added the following code to my global.scss file to account for the iPhone X notch:

body {
    margin-top: constant(safe-area-inset-top);
    margin-top: env(safe-area-inset-top);
}

This allows the phone’s notch to not interfere with the screen. Awesome!

However, when i navigate to the tabbed view, because of the spacing added by that code, the tabs are pushed downwards so that they’re only half in view. I tried applying the code above to the landing page scss file in hopes that it would only add that code to that component but it didn’t do anything.

How do I make it so that that css code above applies on the landing page but not on the rest?

Much appreciated,
Rohan

2 Likes