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:
StackOverflow StacjOverflow
Here is a link to the CodePen
My index.html:
<!DOCTYPE html>
Lottery app
WELCOME TO THE LOTTERY!
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;
}
JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)
