I'm looking to create a webpage layout where the left half of the viewport is for Login and the right half is for Signup. This layout should be split side by side on tablets, desktops, and large screens, but stacked vertically (Login on top, Signup on bottom) on smaller devices and mobile. I've tried using two col-md-6 classes with 100vh min-width:768px and above, and 50vh max-width: 768px and below to achieve this responsive design. However, when testing different screen sizes, the height of the Login portion doesn't adjust properly based on its content. I haven't set specific widths and heights for any div elements because Bootstrap handles it automatically through the grid system. Below is the code I've implemented; could you help me resolve this issue?
Desired Output (Almost There)
Sample in Mobile Sample on Computer
Issue:
/*index.css*/
body {
padding-top: 56px;
}
.tmbl-nav {
background-color: #001427;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
/*.left-side,.right-side{
height:50vh;
width:100%;
}
*/
.left-side {
background-color: #BF0603;
}
.right-side {
background-color: #8D0801;
}
.form-box {
background-color: white;
padding: 25px 25px 25px 25px;
}
/* Medium devices (landscape tablets, 768px and down) */
@media only screen and (max-width:768px) {
.nav-link {
text-align: center;
}
}
@media screen and (min-width:768px) {
.left-side,
.right-side {
height: 100vh;
}
}<!DOCTYPE HTML>
<html lang="en">
<head>
<!--index.php-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<title>My Web Site</title>
</head>
<body>
<?php include_once("inc/header.php");?>
<!--navbar for navigation-->
... (Additional HTML code goes here)
...
</html>