When I'm developing in the responsive view of a browser (e.g. Firefox: iphone X) everything fits perfectly, but when I change to the iphone X browser (Safari or Chrome) the content goes behind the browser bottom menu, and I need to scroll to see the content.
Is the Grid not taking in consideration the viewport size minus the bottom menu size of the browser?
Any hint to overcome this subject?
Thanks in advance.
I managed to have a workaround, not the ideal solution but solves the issue.
The challenge in the mobile environment, to have a fixed bottom menu always visible, is due to the property height: 100vh in the .main-container wrapper. Then what was the workaround?
Was added in styles.css to define a reference height height: 100%
html, body {
height: 100%;
}
and in app.component.css
.main-coontainer {
height: 100% !important;
}
... and it's done. See the example at stackblitz.com/edit/clarity-design-grid-responsive.