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

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

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

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.

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

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.