React application shrinking on iPhone - html

Question

So when testing in Chrome, I used a Window Resizer to check the viewport sizes and everything looked amazing. After deployment, I ended up getting this:
The application is ReactJS and is hosted using Nginx on an Ubuntu server (not that that should matter).
styles.css
.header-text {
font-size: 212px !important;
color: white;
line-height: 0.8 !important;
}
.subheader-text {
line-height: 1;
font-size: 44px !important;
}
.content-boxes {
display: flex;
flex-direction: column;
position: relative;
}
.content-box {
align-self: center;
width: 400px;
height: 400px;
border-radius: 32px;
background-color: #27285C;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
}
.content-box-header {
font-size: 72px !important;
text-align: center;
}
.content-box-container {
grid-area: content-box-container;
width: 400px;
height: 400px;
border-radius: 32px;
background-color: #27285C;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
margin-left: 250px;
justify-self: center;
}
.content-box-description {
grid-area: content-box-description;
justify-self: left;
}
.fullscreen-content {
display: flex;
flex-direction: column;
}
#media(max-width: 1200px) {
.header-text {
font-size: 144px !important;
}
.subheader-text {
font-size: 44px !important;
}
.fullscreen-content {
margin-top: -20px !important;
}
.content-box {
width: 200px;
height: 200px;
}
.content-boxes-container {
display: flex !important;
flex-direction: column !important;
justify-content: center;
padding: 15px;
margin-bottom: 15px;
}
.content-box-container {
align-self: center;
margin-left: 0px;
}
.content-box-description {
max-width: 80%;
color: #27285C;
align-self: center;
justify-self: left;
margin-top: -15px;
}
.cards-container {
display: flex;
justify-content: center;
flex-direction: column !important;
margin: 0px !important;
z-index: 1;
}
.image-card {
margin-right: 0px !important;
}
}
#media(min-width: 1201px) {
.header-text {
font-size: 212px !important;
}
.fullscreen-content {
margin-top: -350px !important;
overflow-y: hidden;
}
.content-boxes-container {
display: grid;
grid-template-columns: 0.9fr 0.3fr 1.8fr;
grid-template-rows: 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"content-box-container content-box-container content-box-description"
"content-box-container content-box-container content-box-description";
align-items: center;
margin-left: 200px;
}
.content-box-description {
max-width:60%;
color: #27285C;
margin-top: -50px !important;
}
.about-section {
width: 60% !important;
text-indent: 64px;
}
}
.cards-container {
display: flex;
justify-content: center;
flex-direction: row;
margin: 15px;
z-index: 1;
}
.image-card {
align-self: center;
width: 532px;
height: 832px;
background-color: white;
border-radius: 32px;
margin-bottom: 15px;
margin-right: 45px;
}
.cards-container .picture-card {
align-self: center;
}
.about-section {
width: 90%;
display: flex;
flex-direction: column;
align-self: center;
margin: 45px;
}
#font-face {
font-family: 'JockeyOne-Regular';
src: local('JockeyOne-Regular'), url('../layouts/fonts/JockeyOne-Regular.ttf') format('truetype');
/* other formats include: 'woff2', 'truetype, 'opentype',
'embedded-opentype', and 'svg' */
}
Any help would be appreciated! Thanks.