In the web game that I have created, I have made a media query targeting screen sizes of less than 500px that worked just fine when I resized my browser on my laptop. See below for images. Page for browser size above 500px:
Page for browser size less than 500px:
However, on my tiny iPhone 5 screen (yes, I know, it's a relic), the media query does not activate, screwing up the website:
The width of my iPhone screen is definitely smaller than the screen of my laptop's browser when I shrink it down enough that the media query kicks in, hence my confusion. If anybody knows why my iPhone won't render the webpage according to the media query, I would greatly appreciate being clued in. Here is the media query if it helps:
@media only screen and (max-width: 750px) {
:root {
--sidebar-height: calc(var(--game-size) / 3);
--main-width: var(--game-size);
--main-height: calc(var(--game-size) + var(--sidebar-height));
}
main {
flex-direction: column-reverse;
}
hr {
display: none;
}
.vr {
display: inline-block;
}
#game {
margin: 0;
}
#sidebar {
border-bottom: 3px solid var(--center-color);
border-left: none;
width: var(--main-width);
height: var(--sidebar-height);
margin: 0;
}
#inner_sidebar {
margin: 2.5%;
display: flex;
align-items: center;
}
#stats {
display: inline-block;
min-width: 8ch;
}
#retry {
display: inline-block;
}
#victory {
bottom: calc(var(--main-height) + 5vh);
}
}
Thanks!
Checked your github link, you're missing this among your meta tags. Only then the browser will scale down or apply the media queries in smaller screens.
<meta name="viewport" content="width=device-width, initial-scale=1">