iPhone X bottom margin


#1

Hi,

I am trying to update my ionic v1 app to support iPhone X dimensions. I am unable to get the footer to adapt to the virtual home button. I am attempting to move the bottom tabs up a bit, however a white line appears. How can I get that bottom bar to be the same color as my footer? I added a bottom margin of 15 px and it gives me a little white line as you can see in the image below.

.tab-nav {
  margin-bottom: 15px;
  background-color: #00367b;
}


#2

Try using a padding rather than a margin. Margins “push” the content box up and padding will pad the content box while keeping the background colour. I suggest doing a bit of reading up on css. Good luck!


#3

Did you ever get this resolved? Where did you add the code you mentioned above? I’m coming from creator to Ionic Pro.


#4

Same problem here. In my case, viewport-fit=cover give me some problems