I'm currently working on a lottery app and have coded the UI for it. The problem is that my page is not scrollable right now.
It may be because of the gradient background I've added.
I've searched for several solutions but none of them worked:
Here is a link to the CodePen
My index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lottery app</title>
<link rel="stylesheet" href="src/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
</head>
<body>
<main class="container">
<section class="lottery-page">
<h1 class="main-header">WELCOME TO THE LOTTERY!</h1>
<h2 class="action-header">Please, enter your winnings numbers here (from 0 to 52):</h2>
<div class="user-input">
<div class="number-wrapper">
<label for="user-number_1">1st number</label>
<input id="user-number_1" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">2nd number</label>
<input id="user-number_2" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">3rd number</label>
<input id="user-number_3" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">4th number</label>
<input id="user-number_4" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">5th number</label>
<input id="user-number_5" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-number_1">6th number</label>
<input id="user-number_6" class="lottery-number" type="number" maxlength="2">
<span class="focus-border">
<i></i>
</span>
</div>
<div class="number-wrapper">
<label for="user-draw">Number of draws</label>
<input id="user-draw" class="draw-number" type="number" maxlength="6">
<span class="focus-border">
<i></i>
</span>
</div>
</div>
<div class="submit-button">
<button id="button-send_results" type = "submit">Let's win!</button>
</div>
<div class="user-results">
</div>
</section>
</main>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="src/index.js"></script>
</body>
</html>
style.css
html, body {
font-family: 'Ubuntu', sans-serif;
overflow-y: scroll;
}
.container {
height: 100%;
width: 100%;
display: flex;
position: fixed;
align-items: flex-start;
justify-content: center;
}
.container::before {
content: "";
position: absolute;
background: radial-gradient(ellipse at bottom right, #aef78e, #77BA99,#aef78e);
background-size: 400% 400%;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
animation: ambient 25s ease-in-out infinite;
z-index: -1;
}
@keyframes ambient {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.lottery-page {
width: 80%;
border: 3px solid black;
border-style : inset;
margin-top: 50px;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.main-header {
padding: 0px, 50px, 50px, 50px;
}
.lottery-number, .lottery-number_label, .draw-number{
width: 100px;
height: 50px;
}
.user-input {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 100px, 0px;
padding: 100px, 0px;
}
.action-header {
margin-bottom: 70px;
}
label, input {
display: block;
text-align: center;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
font: 15px/24px 'Muli', sans-serif;
color: #333;
width: 150px;
box-sizing: border-box;
letter-spacing: 1px;
margin: 30px;
}
.number-wrapper {
position: relative;
}
/* Input animation */
.lottery-number {
border: 3px solid #ccc;
padding: 7px 14px 9px;
transition: 0.4s;
}
