Struggling with centering a 404 error message on your Bootstrap 5 page without messing up the footer layout? When the viewport is small, the 404 message may end up getting covered by the footer. Feel free to check out the code snippet in full view to see how the current 404 page appears.
/* body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serrif;
min-height: 100vh;
} */
#error-message {
text-align: center;
position: absolute;
top:50%;
transform: translateY(-50%);
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
footer p {
padding-top: 8px !important;
}
@media screen and (min-width: 768px) and (max-width: 991px) {
footer h4 {
min-height: 56px;
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>404 | </title>
<link rel="stylesheet" href="./css/404.css>
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/email-protection(cbbbd2c803c2d6dbdbc1cda158756b65cbcddb2)" rel="stylesheet">
<!-- More links... -->
<script src="https://cdn.jsdelivr.net/npm/email-protection(91326f6f74747476757070357461746281386578)/dist/js/bootstrap.bundle.min.js></script>
<!-- Page content starts here -->
<div class="container"id="error-message">
<h2>Oops! Page not Found</h2>
<h1>404</h1>
<p>Sorry, we can't find the page you are looking for.</p>
<p>If you clicked a link on our site and were deirected to this page please contact us so we can fix the problem.</p>
<a href="./index.html>Go back home</a>
</div>
<!-- Footer section -->
<footer class="bg-dark text-white" id="footer">
<!-- Footer content goes here -->
</footer>
<!-- End of footer section -->
</body>
</html>