CSS grid is not displaying correctly on actual mobile browsers (all displays correctly when testing mobile screens on desktop though).
If I open the app on a desktop's browser and use the browser's testing of different mobile screen sizes and types, I see that the styling works.
However, if I click the link using my (actual) mobile phone's browser I see that the styling does not work.
i.e. Browser debugging is misleading. This is inconsistent and not how this should work.
Questions:
- What am I missing? Why the discrepancy between devTools and the reality on the mobile device?
- What media query could fix this styling on mobile, while still keeping it CSS grid based (nothing I try fixes it)?
body {
font-family: 'Helvetica Neue', sans-serif;
font-weight: 400;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #53687e;
background: linear-gradient(120deg, #53687e, hsl(0, 0%, 18%)) fixed;
}
#calculator {
margin: 0 auto;
text-align: center;
padding-top: 100px;
}
.container {
position: relative;
line-height: 1.5;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 50px;
}
.key-group {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
align-items: center;
justify-content: center;
background-color: #000;
padding: 8px;
border-radius: 8px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.7);
}
.key-pad {
cursor: pointer;
background: #33373f;
color: #ffff;
border-radius: 8px;
font-size: 2.5rem;
border-style: none;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px; */
}
.display {
grid-column: 1 / span 4;
grid-row: 1;
color: #51aaff;
background: none;
height: 5rem;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
.seven {
grid-column: 1 / span 1;
grid-row: 2;
}
.eight {
grid-column: 2 / span 1;
grid-row: 2;
}
.nine {
grid-column: 3 / span 1;
grid-row: 2;
}
.divide {
grid-column: 4 / span 1;
grid-row: 2;
color: #51aaff;
background-color: #1e242c;
}
.four {
grid-column: 1 / span 1;
grid-row: 3;
}
.five {
grid-column: 2 / span 1;
grid-row: 3;
}
.six {
grid-column: 3 / span 1;
grid-row: 3;
}
.multiply {
grid-column: 4 / span 1;
grid-row: 3;
color: #51aaff;
background-color: #1e242c;
}
.one {
grid-column: 1 / span 1;
grid-row: 4;
}
.two {
grid-column: 2 / span 1;
grid-row: 4;
}
.three {
grid-column: 3 / span 1;
grid-row: 4;
}
.subtract {
grid-column: 4 / span 1;
grid-row: 4;
color: #51aaff;
background-color: #1e242c;
}
.zero {
grid-column: 1 / span 1;
grid-row: 5;
}
.decimal {
grid-column: 2 / span 1;
grid-row: 5;
}
.clear {
grid-column: 3 / span 1;
grid-row: 5;
color: #51aaff;
background-color: #1e242c;
font-size: 2rem;
height: 100%;
width: 100%;
}
.add {
grid-column: 4 / span 1;
grid-row: 5;
color: #51aaff;
background-color: #1e242c;
}
.equals {
grid-column: 1 / span 4;
grid-row: 6;
color: #51aaff;
background-color: #1e242c;
}
footer {
position: fixed;
font-size: small;
color: #fff;
background-color: #262626;
display: flex;
width: 100vw;
height: 4rem;
bottom: 0;
}
.footer-options {
width: 50vw;
display: flex;
justify-content: flex-start;
padding-inline-start: 20px;
align-items: center;
}
footer span {
width: 50vw;
display: flex;
justify-content: flex-end;
padding: 0 20px;
align-items: center;
}
@media (max-width: 900px) {
footer {
flex-wrap: wrap;
height: 5rem;
}
.footer-options {
width: 100vw;
flex-direction: row;
justify-content: center;
padding-inline-start: 0;
align-items: center;
}
footer span {
width: 100vw;
flex-direction: column;
text-align: center;
align-self: flex-start;
}
}
Relevant React code:
return (
<React.Fragment>
<header>
{/* <h1>Calculator</h1> */}
</header>
<div id="calculator">
<div className="container">
<div className="key-group">
<div id="display" className="key-pad display">{display != 0 ? display : 0}</div>
<button id="seven" className="key-pad seven" onClick={() => Input(7)}>7</button>
<button id="eight" className="key-pad eight" onClick={() => Input(8)}>8</button>
<button id="nine" className="key-pad nine" onClick={() => Input(9)}>9</button>
<button id="divide" className="key-pad divide" onClick={() => {Operator("/")}}>÷</button>
<button id="four" className="key-pad four" onClick={() => Input(4)}>4</button>
<button id="five" className="key-pad five" onClick={() => Input(5)}>5</button>
<button id="six" className="key-pad six" onClick={() => Input(6)}>6</button>
<button id="multiply" className="key-pad multiply" onClick={() => {Operator("*")}}>×</button>
<button id="one" className="key-pad one" onClick={() => Input(1)}>1</button>
<button id="two" className="key-pad two" onClick={() => Input(2)}>2</button>
<button id="three" className="key-pad three" onClick={() => Input(3)}>3</button>
<button id="subtract" className="key-pad subtract" onClick={() => {Operator("-")}}>-</button>
<button id="zero" className="key-pad zero" onClick={() => Zero()}>0</button>
<button id="decimal" className="key-pad decimal" onClick={() => Decimal()}>.</button>
<button id="clear" className="key-pad clear" onClick={() => Clear()}>AC</button>
<button id="add" className="key-pad add" onClick={() => {Operator("+")}}>+</button>
<button id="equals" className="key-pad equals" onClick={()=>Equals()}>=</button>
</div>
<footer>
<ul className="footer-options">
<li className="footer-link"><a href="#" className="footer-linktext">Legal</a></li>
<li className="footer-link"><a href="#" className="footer-linktext">Contact Us</a></li>
</ul>
<span>© 2019 Developed by Pat. All Rights Reserved.</span>
</footer>
</div>
</div>
</React.Fragment>
)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Unica+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<div id="app">
</div>
</body>
</html>
