#media function not responding when trying to change height of div - html

Question

I'm trying to change the height of a certain div.
Somehow, the div gets a default height of 964px.
When I'm trying to change the height by using style: height:40vw; inside the div tag, it works just fine, but when I'm using the #media function without the style, it doesn't work.
I'm referring to the div with class and id of parent-container.
Here is my code:
HTML
<div class="content">
<div class="parent-container" id="parent-container" style="position: relative;top: 0;">
<div id="video-container"
style="z-index: -1; min-height: 100%;min-width: 100%; position: absolute; top: 0;left: 0; transition-delay: 500ms;overflow-y: hidden">
<video class="fade-in" autoplay loop muted
style="min-width:100%;max-height:100% ;position: fixed; left: 0; top: 0; object-fit: fill;">
<source id="mp4" src="images/video.mp4" type="video/mp4">
<p>Your user agent does not support the HTML5 video elemnt</p>
</video>
</div>
<div class="videoRGBA">
<img src="images/brush.png" style="position: relative; top: 15vw; left: 50px">
<div style="position: relative; top: 0.8vw;">
NOT RELEVANT
</div>
</div>
</div>
CSS
#media only screen and (min-width 427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width 0px) and (max-width 426px){
.parent-container{
height:90vw;
}
}
Thanks.

Answer 1

I missed ":" in the media query.
instead of
#media only screen and (min-width 427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width 0px) and (max-width 426px){
.parent-container{
height:90vw;
}
}
Just changed to:
#media only screen and (min-width :427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width: 0px) and (max-width: 426px){
.parent-container{
height:90vw;
}
}