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