Я создаю страницу регистрации, используя HTML и CSS, однако я не могу заставить страницу прокручиваться вверх и вниз, когда я уменьшаю окно до такой степени, что форма больше не полностью видна. Я попытался добавить «overflow-x: scroll;», но мне не удалось заставить его работать. Есть предложения?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register</title>
<link rel="stylesheet" href="registerStyle.css">
</head>
<body>
<label class="logo">Homemade</label>
<div class="registrationContainer">
<form action="/users/register" method="POST">
<h1>Create Account</h1>
<div class="inputOption">
<label class="inputOptionLabel">Your Name</label>
<input type="name" id="name" name="name">
</div>
<div class="inputOption">
<label class="inputOptionLabel" for="email">Email</label>
<input type="email" id="email" name="email">
</div>
<div class="inputOption">
<label class="inputOptionLabel" for="password">Password</label>
<input type="password" id="password" name="password">
</div>
<div class="inputOption">
<label class="inputOptionLabel" for="password2">Confirm Password</label>
<input type="password" id="password2" name="password2">
</div>
<button type="submit">Register</button>
<label>Already have an account?</label>
<a href="#">Sign In</a>
</form>
</div>
</body>
</html>
/* Resets some defualt set styles */
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
text-decoration: none;
}
/* Container holding registration form */
.registrationContainer{
/* Center the form in middle of the page */
position: fixed;
top: 370px;
left: 50%;
transform: translate(-50%, -50%);
/* Style within form */
padding: 25px 20px;
/* Style of form */
width: 350px;
height: 396px;
/* Border around the form */
border: solid;
border-color: rgb(201, 201, 201);
border-width: 1px;
border-radius: 2%;
}
/* Positioning/style of logo within registration form */
.logo{
/* Positioning of logo */
position: fixed;
top: 150px;
left: 50%;
transform: translate(-50%, -50%);
/* Logo style */
color: rgb(248, 166, 89);
font-size: 36px;
font-weight: bold;
margin-bottom: 10px;
}
/* Positioning/style of heading within registration form */
h1{
/* Positioning of heading */
display: block;
width: 100%;
float: left;
/* Heading style */
font-size: 28px;
margin-bottom: 20px;
}
.inputOptionLabel{
/* Positioning of labels */
display: block;
/* Label styles */
font-size: 16px;
font-weight: bold;
margin-bottom: 2px;
margin-left: 4px;
}
input{
/* Positioning of labels */
display: block;
margin-bottom: 5px;
border-radius: 5px;
/* Label text styles */
font-size: 16px;
/* Label Style */
width: 100%;
padding: 5px;
border-width: 1px;
border-style: solid;
border-color: rgb(201, 201, 201);
}
button{
/* Positioning of labels */
display: block;
margin-top: 25px;
/* Label text styles */
font-size: 12px;
font-weight: bold;
/* Label Style */
width: 100%;
padding: 7px 10px;
background: rgb(248, 166, 89);
outline: none;
border: 1px rgb(255, 160, 71) solid;
border-radius: 2px;
box-shadow: inset 0 2px 5px rgb(250, 183, 120);
}
Спасибо за любую помощь.