I have a straightforward page:
<head>
</head>
<body>
<nav>
</nav>
<div id="main">
</div>
<footer>
<div class="content has-text-centered">
test
<br>
<i>by me</i>
</div>
</footer>
</body>
and inside the main div I use HTMX / JS to insert and switch parts of the page which works just fine. Until I use the zoom:
If I zoom in to the point where the last content from main div comes to the bottom of the page, the footer overlaps that content.
I tried
- adding a
mt-1to the footer’s class - putting a
divwithmt-1between the maindivand the footer
both with no effect.
How can I ensure, the footer stays away from the content, preferable with some space of distance?