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>
You need to sign in to view this answers
Leave feedback about this