Developing a Progressive Web App (PWA) has presented numerous challenges, particularly in ensuring responsiveness.
In an attempt to create a footer for the page, I defined the following classes:
#root {
height:100vh;
}
.provider-container {
padding: 3rem 1rem 4rem 1rem;
height: 90%;
border-radius: 0 0 1rem 1rem;
}
.footer{
position: absolute;
bottom: 0;
right:0;
left:0;
height: 4rem;
background: white;
}
This is the structure of my HTML:
<body>
<div id="root">
<div>Some content....</div>
<div className="footer">footer</div>
</div>
</body>
Everything seems to function as expected during debugging. The intention was to match the height of the footer with the padding-bottom of the container to ensure proper fit. When adding the app to the homescreen and launching it, everything works seamlessly. However, when accessing the page through a browser, the container overflows its boundaries. Certain content gets obscured by the footer, almost blending in with the browser's own viewport/footer. The accompanying image provides visual clarification. While adjusting the page's content size or margins could be a quick fix, this would negatively impact the appearance when opening the app directly without the browser interface.
Any suggestions or solutions?