GOAL
I want the content of my page to adjust to screen sizes that are smaller than 600px wide.
ISSUE
When using the responsive tool in Chrome, preset screen sizes like iPhone X do not apply media queries properly. Even manually adjusting the screen size does not trigger the media queries. The same problem occurs in Firefox with preset screen sizes, but manual resizing works as expected. Testing on a physical device like an iPhone 7 Plus also shows that media queries do not work as intended.
In my project, I am utilizing SCSS with mixins for media queries. While responsiveness is working on most pages, there is an issue specifically on the sign-in page. For this question, I have simplified it by providing a CSS-only version.
SOLUTION ATTEMPT
body {
margin: 0;
padding: 0;
}
html {
/* 10px/16px = 62.5% -> 1rem = 10px */
font-size: 62.5%;
}
/* phone screen breakpoint */
@media (max-width: 600px) {
html {
/* 1 rem = 7px, 7/16 = 43.75% */
font-size: 43.75%;
}
}
.container {
background: black;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.wrapper {
max-width: 35rem;
border-radius: 2rem;
background: rgba(255, 255, 255, 0.8);
box-sizing: border-box;
right: 50%;
bottom: 50%;
transform: translate(50%,50%);
position: absolute;
padding: 5rem;
}
.wrapper h1 {
color: black;
font-size: 1.8rem;
font-weight: 600;
text-align: center;
padding-bottom: 2rem;
}
.wrapper form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wrapper form input {
width: 100%
padding: .5rem;
margin-bottom: 1rem;
}
.footer {
position: absolute;
bottom: 0;
float: left;
width: 100%;
display: flex;
justify-content: space-between;
}
.footer ul {
float: left;
margin-top: .5rem;
width: 70vw;
}
.footer li {
display: inline-block;
border-right: .1rem solid white;
padding: 0 1rem;
margin-bottom: .5rem;
}
.footer li:last-child {
border-right: none;
}
.footer li a {
display: inline-block;
color: white;
font-size: 1rem;
font-weight: 500;
}<div class="container">
<div class="wrapper">
<h1>SIGN IN HERE</h1>
<form>
<input type="text" placeholder="E-mail">
<input type="text" placeholder="Password">
<button>Sign In</button>
</form>
</div>
<div class="footer">
<div>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Policy</a></li>
</ul>
</div>
</div>
</div>