Creating a login page with two main content divs in a section layout. The first div contains the logo, input prompts, and login/password reset buttons. The second div serves as a footer with social media links. On a full-size window, the logo is positioned to the left of the login prompt, and the social media links are at the bottom. However, when the window height is reduced, the login buttons overlap into the social media bar at the bottom. Also, when the window width is too small, the logo overlaps the input form. I want to keep them separate and have the layout be scrollable on smaller windows.
I attempted to use a media query to address the issue, but it did not work as expected:
.hcustom {
height: calc(100% - 73px);
}
@media screen and (max-width: 400px) {
.hcustom {
height: 100%; // I also tried with 100vh
}
}
I experimented with adding and removing the word "Screen" in the media query, unsure of its correct usage. Another solution I found was to set the height of `.hcustom` to `min-height: 100vh;`, which resolved the issue on smaller windows but created a large gap between the first div and the social media bar on larger windows, causing unnecessary scrolling.
Below is the structure of my index.php file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="Description" content="Login">
<title>LOGIN</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="loginStyles.css">
</head>
<body>
<section class="vh-100">
<!-- FIRST Div -->
<div class="container-fluid hcustom">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-9 col-lg-6 col-xl-5 text-center">
<img src="img/main-logo.png"
alt="Login image" class="img-fluid" style="">
</div>
<div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
<form action="login.php" method="post">
<div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
<h2>Login</h2>
</div>
...
</form>
</div>
</div>
</div>
<!-- Second Div -->
<div
class="d-flex flex-column flex-md-row text-center text-md-start justify-content-between py-4 px-4 px-xl-5 bg-primary ">
<div class="text-white mb-3 mb-md-0">
Social Media
</div>
...
</div>
</section>
</body>
</html>
Below is the content of my loginStyles.css file:
.hcustom {
height: calc(100% - 73px);
}
@media screen and (max-width: 450px) {
.hcustom {
height: 100vh;
}
}
I am utilizing Bootstrap 5 for the design.