I have tried everything from html and body with adjusting height, min-height, max-height set to 100%vh or 100% or js to check screen size but nothing works. Finally created a container to set height but even container goes out of screen size vertically. All buttons needs to adjust to screen size but lower ones are getting cut off.
.container {
width: 100%;
margin: none;
min-height: 100vh;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
overflow: auto;
}
.button {
background-color: #e7e7e7;
position: absolute;
border: none;
color: black;
padding: 2vw 3vw;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 4vw;
cursor: pointer;
border-radius: 50%;
}
.button1 {
margin-left: 50%;
margin-top: 45%;
}
.button2 {
margin-left: 30%;
margin-top: 65%;
}
.button3 {
margin-left: 80%;
margin-top: 50%;
}
.button4 {
margin-left: 80%;
margin-top: 10%;
}
.button5 {
margin-left: 10%;
margin-top: 10%;
}
.button6 {
margin-left: 40%;
margin-top: 20%;
}
button7 {
margin-left: 10%;
margin-top: 45%;
}
.button8 {
margin-left: 10%;
margin-top: 90%;
}
.button9 {
margin-left: 70%;
margin-top: 75%;
}
.button10 {
margin-left: 50%;
margin-top: 95%;
}
@media screen and (max-width: 600px),
(min-height: 100%) {
.button {
padding: 10px 20px;
font-size: 5vw
}
}<body>
<div class="container">
<button class="button button1" value="1">1</button>
<button class="button button2" value="2">2</button>
<button class="button button3" value="3">3</button>
<button class="button button4" value="4">4</button>
<button class="button button5" value="5">5</button>
<button class="button button6" value="6">6</button>
<button class="button button7" value="7">7</button>
<button class="button button8" value="8">8</button>
<button class="button button9" value="9">9</button>
<button class="button button10" value="10">10</button>
</div>