Fixed footer mobile scrolling

This commit is contained in:
Rob Kelly 2025-12-20 01:45:38 -07:00
parent c998f7595e
commit 6241b14699
4 changed files with 48 additions and 42 deletions

View File

@ -11,7 +11,7 @@
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container overflow-auto vh-100">
<div class="container overflow-auto d-flex flex-column dvh-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
@ -42,7 +42,7 @@
</div>
</div>
</nav>
<main class="container mt-5">
<main class="container mt-5 flex-fill">
<div class="section row row-cols-1 g-5 px-2 py-5">
<div class="col">
<div class="card text-center">
@ -77,18 +77,18 @@
</div>
</div>
</main>
</div>
<footer id="contact" class="pt-2">
<footer class="pt-5">
<div class="container text-center text-muted text-small">
<p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script>
// Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</div>
</footer>
</div>
</body>
</html>

View File

@ -11,7 +11,7 @@
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container overflow-auto vh-100">
<div class="container overflow-auto d-flex flex-column dvh-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
@ -42,7 +42,7 @@
</div>
</div>
</nav>
<main class="container mt-5 fs-4">
<main class="container mt-5 fs-4 flex-fill">
<div class="section p-5 text-center">
<p>
We are artists, designers, developers, and creators based in Albuquerque, New Mexico.
@ -115,18 +115,18 @@
</button>
</div>
</main>
</div>
<footer id="contact" class="pt-2">
<footer class="pt-5">
<div class="container text-center text-muted text-small">
<p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script>
// Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</div>
</footer>
</div>
</body>
</html>

View File

@ -11,7 +11,7 @@
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<div class="container overflow-auto vh-100">
<div class="container overflow-auto d-flex flex-column dvh-100">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark border-bottom">
<div class="container-fluid">
<a class="navbar-brand d-flex align-items-center link-body-emphasis text-decoration-none" href="/">
@ -42,7 +42,7 @@
</div>
</div>
</nav>
<main class="container mt-5">
<main class="container mt-5 flex-fill">
<div class="section row row-cols-1 g-5 px-2 py-5">
<div class="col">
<div class="card text-center">
@ -81,18 +81,18 @@
</div>
</div>
</main>
</div>
<footer id="contact" class="pt-2">
<footer class="pt-5">
<div class="container text-center text-muted text-small">
<p>
<a href="mailto:contact@intrusive.games" class="text-white text-decoration-none"><span class="fa-solid fa-envelope"></span> contact@intrusive.games</a>
</p>
<p>© <span id="year">2025</span> Intrusive Thoughts Creative Collective LLC. All rights reserved.</p>
</div>
</footer>
<script>
// Update copyright year automatically
document.getElementById('year').textContent = new Date().getFullYear();
</script>
</div>
</footer>
</div>
</body>
</html>

View File

@ -39,12 +39,18 @@ body:before {
body {
font-family: "NunitoSans";
overflow: hidden;
}
a {
text-decoration: none;
}
.dvh-100 {
height: 100vh; /* Compatibility fallback */
height: 100dvh; /* Dynamic viewport height */
}
.text-small {
font-size: 12px;
}