I've recently started learning Bootstrap with HTML and CSS. Using the bootstrap grid system, I've created three sections like this. Everything looks good on medium screens or larger. However, a problem arises when viewing on smaller screens (or zooming in), causing the content to appear bigger and taller. This results in the footer ending up in the middle of the screen like this.
Here's what I've tried:
- Setting body height to 100%
- Clearing both
- Setting position:absolute; bottom:0
I suspect the issue stems from the div in the menu. When zoomed in, the content stretches but the footer doesn't adjust accordingly
@import url('https://fonts.googleapis.com/css2?family=Warnes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap');
html,body{
height: 100%;
width: 100%;
}
/* Rest of the CSS code... */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Importing stylesheet links and font installation -->
</head>
<body>
<!-- Navbar, Menu, and Footer sections content... -->
</body>
</html>