body{
background-image: url(https://www.ucalgary.ca/mediacentre/files/mediacentre/aerials_011a7179_fe.jpg);
background-size: cover;
background-repeat: no-repeat;
font-family: 'Numans', sans-serif;
}
html, body{
height: 100%;
}
.container{
height: 100%;
align-content: center;
overflow: hidden;
}
.card{
height: 370px;
margin: 10% auto auto 30%;
width: 450px;
background-color: rgba(0,0,0,0.50);
border-radius: 10px;
}
.card-header h3{
color: white;
text-align: center;
padding-top: 40px;
font-size: 30px;
}
.card-header h4{
color: white;
text-align: center;
padding-top: 50px;
font-size: 20px;
}
.login_btn{
color: black;
background-color: #FFC312;
border-color: #FFC312;
width:100px;
padding: 12px;
border-radius: 5px;
margin-left: 180px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
font-family: 'Numans', sans-serif;
text-decoration: none;
}
.login_btn:hover{
color:black;
background-color: white;
border-color: white;
.card{
height: calc(100vh - 20%);
margin: 10% 15% 0 15%;
}<!DOCTYPE html>
<html>
<head>
<title>University of Calgary Scholarship</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="selectionPage.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class = "container">
<div class="d-flex justify-content-center h-100">
<div class = "card">
<div class ="card-header">
<h3>University of Calgary Scholarship Page</h3>
<h4>Please Select One</h4>
</div>
<div class = "card-body">
<div class = "form-group">
<form action="studentLogin.html">
<input type = "submit" value = "Student" class= "btn float-left login_btn">
</form>
<form action="adminLogin.html">
<input type = "submit" value = "Administrator" class= "btn float-right login_btn">
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>I have made some updates to my code since my last submission, however, I am still facing issues with the content not adjusting properly when the browser window is narrowed down. Particularly, on smaller devices such as tablets or mobile phones, part of the container remains invisible. I tried implementing suggestions provided by another user at the end of my CSS file, which improved the situation but did not completely resolve it, especially at smaller screen sizes.
Thank you for your assistance. .........................................................................