Chrome and Firefox responsive mode VS Phone responsive mode - html

Question

Can someone explain to me why in Chrome responsive mode my web page looks good, and on the mobile it looks differently that I don't like.
And yes I used:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in my HTML.
[Chrome responsive mode:] (https://i.stack.imgur.com/PIkBo.png)
Phone responsive mode:
This my CSS that im using to make my website responsive:
#media screen and (min-width: 320px) and (max-width: 480px){
html,
body {
overflow-x: hidden !important;
}
body {
position: relative;
background-color: rgb(100, 100, 195);
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
}
#video-background {
display: none;
z-index: -1;
}
.message-top {
font-size: 1.2em;
top: 15vh;
font-family: 'San Francisco';
font-weight: bolder;
left: 22vh;
}
.coming_soon {
top: 25vh;
}
.message-bottom {
display: none;
}
#analog-clock {
position: absolute;
top: 50vh;
left: 47%;
transform: translate(-50%, -50%);
width: 90vw;
height: 90vw;
opacity: initial;
}
#clock-dial {
width: 70vw;
height: 70vw;
}
#hour-hand {
width: 0.18vh;
height: 20%;
top: 28%;
left: 49.5%;
}
#sec-hand {
width: 0.5%;
height: 30%;
top: 16.5%;
left: 49%;
}
.logo-bg {
position: absolute;
width: 50%;
top: -5%;
left: -5%;
}
.logo-bg img {
position: absolute;
width: 20vh;
top: -3%;
left: -3%;
}
#social-sidebar {
visibility: hidden;
}
.scroll-button {
top: 80%;
max-width: min-content;
}
.bg-below-video {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
min-width: auto;
min-height: auto;
z-index: 1;
}
#home-button {
top: -45vh !important;
position: relative;
right: -24vh;
font-size: 0.8em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
bottom: 500%;
font-size: 0.8em;
color: black;
}
#subscribe-button-x {
top: -45vh !important;
position: relative;
right: -24vh;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
bottom: 500%;
font-size: 0.8em;
color: black;
}
#subscribe-button-x {
padding: initial;
background-color: initial;
text-decoration: initial;
z-index: 1;
transition: initial;
}
#home-button:hover,
#subscribe-button-x:hover {
pointer-events: none;
transform: none;
}
}