Buttons on calculator app are going outside their div parents - html

Question

I am building this calculator, which made me go insane this afternoon. I am using for the first time Grid, till now I only used flex-box...
The problem is that the buttons are going outside the div (calculator). I am building this mainly for mobile. On the mobile simulator on Chrome looked perfect, but as soon as I uploaded it and looked on it on my phone, the buttons are going WAY outside the div...I've build dozens test websites and never had this problem, everything stayed where shoul've been staying.
What am I doing wrong? I've been here for 2 hours trying to make it work and I beggining to feel stupid.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80vh;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 25%;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>

Answer 1

I found it.
I removed the height from .calculator, gave height: 120px; to .output and added padding: 30px 0; to .keyboardparent.
Thank you for the previous solutions, I didn't think the height of the .calculator set in vh could do some damage.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,215,215);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 120px;
margin: auto;
margin-top: 5.5%;
background: rgba(180,200,180);
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 30px 0;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
}
.top {
display: grid;
grid-template-columns: 1.5fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
text-align: center;
vertical-align: ;
}
.color {
background: rgba(0,200,207,.3);
}
button:active {
transform: scale(.95);
}
.clearall {
background: rgba(255,0,50,.7);
}
.cancel {
background: rgba(255,0,0,.5);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="clearall">C</button>
<button class="cancel"><img src="delete.svg" class="delete" width="23px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color equal">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>

Answer 2

height of .calculator the unit vh to % that is
change this
.calculator{
height: 80vh;
}
to
.calculator{
height: 80%;
}
like this height: 50px; to .output instead of height:25%
Also added a margin-bottom to .keyboardparent
.keyboardparent { margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body {
background: linear-gradient(90deg, rgba(0,244,147,.7), rgba(30,144,255,.7));
}
.calculator {
border: 1px solid rgb(0,0,0,.3);
width: 80vw;
height: 80%;
margin: auto;
position: relative;
top: 50vh;
transform: translateY(-50%);
border-radius: 10px;
background: rgb(225,225,225);
box-shadow: 0 0 10px rgb(0,0,0,.7), -5px -5px 10px rgb(0,0,0,.3) inset, 5px 5px 5px rgb(255,255,255) inset;
}
.name {
width: 100%;
height: 3%;
position: absolute;
top:10px;
}
h5 {
display: flex;
justify-content: center;
align-items: center;
font-size: .8em;
color: rgb(0,0,0,.5);
position: relative;
top: 50%;
transform: translateY(-50%);
}
.output {
width: 90%;
height: 50px;
margin: auto;
margin-top: 5.5%;
background: white;
box-shadow: 0 0 5px rgb(0,0,0,.7) inset ;
border-radius: 3px;
}
.previous {
width: 100%;
height: 40%;
border-bottom: .5px solid rgb(0,0,0,.5);
}
.current {
width: 100%;
height: 60%;
}
.keyboardparent {
width: 90%;
height: 75%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border:3px solid red;
margin-bottom: 5.5%;
}
.keyboard {
width: 100%;
height: 90%;
margin: auto;
border:3px solid black;
}
.top {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr;
grid-gap: .5em;
-webkit-gap: .5em;
}
.rest {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: .5em;
-webkit-grid-gap: .5em;
margin-top: .5em;
}
button {
cursor: pointer;
font-size: 1.5em;
padding: 10px;
border-radius: 10px;
border: none;
box-shadow: 0 0 3px rgba(0,0,0,.5), -3px -3px 5px rgba(0,0,0,.3) inset, 3px 3px 5px rgba(255,255,255,.8) inset;
outline: none;
background: rgba(250,250,250,.8);
}
.color {
background: rgba(0,200,197,.3);
}
button:active {
transform: scale(.95);
}
<div class="calculator">
<div class="name">
<h5>Matthew Industries INC</h5>
</div>
<div class="output">
<div class="previous"></div>
<div class="current"></div>
</div>
<div class="keyboardparent">
<div class="keyboard">
<div class="top">
<button class="colorc">C</button>
<button class="color"><img src="delete.svg" class="delete" width="20px" alt=""></button>
<button class="color">%</button>
</div>
<div class="rest">
<button>7</button>
<button>8</button>
<button>9</button>
<button class="color">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="color">x</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="color">-</button>
<button class="color">.</button>
<button>0</button>
<button class="color">=</button>
<button class="color">+</button>
</div>
</div>
</div>
</div>