I am creating a calculator using raw html, css and js and am in the process of designing the calculator itself. However, I am having the issue of sizing the buttons in a way that they remain responsive and are sized relative to their container 'row'.
What is the most efficient way to size the buttons so that they are even, fit the containers and ensure they remain in their respective containers? Thank You!
* {
border: 1px solid black;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 40vh;
display: flex;
flex-direction: column;
}
.display {
flex: 1;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
}
.num{
margin: 1vh;
position: relative;
padding: 10%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<h1>Calculator</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>Here is the code, don't use border as a *
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}
.calculator {
padding: 3vh;
height: 50vh;
width: 20vw;
display: flex;
flex-direction: column;
border: 1px solid #000;
}
.display {
flex: 1;
border: 1px solid #000;
}
.buttons {
flex: 6;
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid #000;
}
.row {
flex: 1;
display: flex;
justify-content: space-evenly;
margin-top: 10px;
}
.num {
width: 18%; /* Set a width to control button size */
height: 100%; /* Make buttons fill the row height */
padding: 10px; /* Add some padding for better touch */
font-size: 1.5em; /* Increase font size for readability */
} <h1>Calculator</h1>
<div class="container">
<div class="calculator">
<div class="display">1 + 1</div>
<div class="buttons">
<div class="row row1">
<button class="num">7</button>
<button class="num">8</button>
<button class="num">9</button>
<button class="num op sub">-</button>
<button class="num op div">÷</button>
</div>
<div class="row row2">
<button class="num">4</button>
<button class="num">5</button>
<button class="num">6</button>
<button class="num op add">+</button>
<button class="num op mul">×</button>
</div>
<div class="row row3">
<button class="num">1</button>
<button class="num">2</button>
<button class="num">3</button>
<button class="num clr">CLR</button>
<button class="num op eq">=</button>
</div>
<div class="row row4">
<button class="num">0</button>
<button class="num">00</button>
</div>
</div>
</div>
</div>