Content hidden by bottom navigation bar(such as the back, home, and recent apps buttons) in android website

Ionic Framework Ionic React
1

Some content of my website like see the bottom of image below.
there is an Blue color Fab Icon at bottom end corner of the app most part is hidden with navigation bar.
also the last announcement ‘S’ is not full its content is also hidden under navigation bar.

i can fix this easily by adding css

IonSplitPane{
margin-bottom: 55px;
}

But i think it is a bad practice. it might not worked for some phone because of no navigation buttons like Iphone or gesture back buttons.

Please provide a better approach

image
image716×1600 66.2 KB

2

Ionic has padding utility classes.

Also, you need to make sure you use <IonContent> and the other UI components correctly.

If you want more help, show your code.

3

i want more help
this won’t resolve my issue
what specific code u think u need i m not able to share whole code

4

If you want an example of how to lay out components, see the react version of the Ionic conference app.

You don’t need to show all your code for the app; you just need to show the code for the page that has the layout issue.