When faced with a research issue, I usually turn to Google for answers. However, this time, I was unsure of where to begin.
As part of my efforts to enhance my frontend development skills, I undertook The Odin Project and worked on a calculator project. Using a CSS grid to organize the buttons and display box, I considered breakpoints that could cause overflow on the screen:
.calculator {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 120px repeat(5, 100px);
justify-content: center;
align-content: center;
}
@media (max-width: 400px), (max-height: 620px) {
.calculator {
grid-template-columns: repeat(4, 80px);
grid-template-rows: 100px repeat(5, 80px);
}
button {
font-size: 1.8em;
}
}
@media (max-width: 320px), (max-height: 500px) {
.calculator {
grid-template-columns: repeat(4, 60px);
grid-template-rows: 80px repeat(5, 60px);
}
button {
font-size: 1.6em;
}
}
I conducted tests using responsive design mode on my browser, which appeared successful. Yet, when I checked on my phone, the display was considerably smaller than expected.
To investigate further, I clicked on the iPhone option in responsive design mode, confirming the size discrepancy. However, upon manual window resizing, the layout displayed correctly based on the CSS specifications above.
You can try it out yourself at
The complete code is available on my GitHub repository at https://github.com/cstobler/calculator
An additional detail you may notice is the custom --vh style property set in the body. This is established using the following JavaScript:
const setVH = () => document.body.style.setProperty("--vh", `${window.innerHeight * 0.01}px`);
setVH();
window.addEventListener("resize", setVH());
Incorporated into the height calculation within the CSS, this solution addresses viewport issues associated with the iOS address bar. Although applied before encountering the problem, I learned from CSS Tricks that it can resolve such issues.
Despite extensive testing, I am unable to determine the root cause or solution to this complication. Any guidance would be greatly appreciated.
Thank you in advance,
Charlie Tobler