My goal is to have the "home" div centered on the page. However, I am facing an issue where when I shrink the browser window, the footer moves up and eventually disappears underneath it. Also, if I zoom out on the page, I can see that the logo and text are not in the middle as intended.
I'm struggling to keep the footer at the bottom while ensuring that the logo and text are aligned in the center of the page.
The framework I am using is Bootstrap 5
CODE: https://jsfiddle.net/esznkh4r/3/
VIDEO:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
}
.home {
padding-top: 150px;
}
.logo {
height: 200px;
width: 200px;
border-radius: 100%;
}
.text {
text-transform: uppercase;
text-align: center;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height:50px;
} <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bda6baa6b8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8d9e8fbfcad1cdd1cf">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<div class="home">
<div class="container">
<img class="logo d-block mx-auto mb-4" src="https://duckduckgo.com/assets/common/dax-logo.svg" alt="LOGO">
<div class="text">
<h1>TEST</h1>
<h6>BLABLABLABLABLA</h6>
</div>
</div>
</div>
</div>
<footer>
<div class="container d-flex flex-wrap justify-content-between align-items-center py-3">
<div class="col-md-4 d-flex align-items-center">
<span>TEST</span>
</div>
<ul class="nav col-md-4 justify-content-end d-flex">
<a class="mb-0 justify-content-end" target="_blank">TEST</a>
</ul>
</div>
</footer>