Quote Form display none media queries - css

Question

I have developed a custom quote form for a client and when the user scroll down I add a class called .quoteform-fixed it also has an id called #quoteForm however I am trying to hide the entire quote form using media queries. Here is the css I am using....
#media screen and (max-width:1670px) and (min-width:1199px){
.quoteform-fixed {display:none !important}
}
#media screen and (max-width:1198px) and (min-width:767px){
.quoteform-fixed {display:none !important}
}
#media screen and (max-width:766px) and (min-width:220px){
.quoteform-fixed {display:none !important}
}
Here is the main rules for quoteform-fixed...
.quoteform-fixed {
position: fixed;
top: 35px;
right: 35px;
display: block;
}
here is the form HTML...
<div id="quoteForm" class="quote-form">
<div id="quoteFormHead"></div>
<form action="<?php the_permalink(); ?>" method="post">
<div id="quoteFormBody">
<div class="formfullwrapper">
<input type="text" name="message_fname" placeholder="Enter your full name here...">
</div>
<div class="formfullwrapper">
<input type="email" name="message_email" placeholder="Enter your email address here...">
</div>
<div class="formfullwrapper">
<input type="number" name="message_phone" placeholder="Enter your phone number here...">
</div>
<div class="formfullwrapper">
<textarea name="message_msg" placeholder="Details, please! Audience? Word count? Type of document? Tone? Deadlines? Sensitive content?"></textarea>
</div>
</div>
<div id="quoteFormFooter">
<div class="formfullwrapper">
<input type="submit" id="submitform" value="Get my free quote">
</div>
</div>
</form>
</div>
And here is the Javascript to add the class on scroll...
window.onscroll = function(){
var top = window.pageYOffset || document.documentElement.scrollTop;
var form = document.getElementById('quoteForm');
if (top > 800) {
form.classList.add("quoteform-fixed");
} else {
form.classList.remove("quoteform-fixed");
}
}
Many thanks,
Phillip

Answer 1

Not sure why you are adding three media queries to apply the same property, but creating it with the max and min flipped should work.
form {
width: 100vw;
height: 600px;
background: tomato;
}
#media (min-width: 300px) and (max-width: 600px) {
.quoteform-fixed {
display: none;
}
}
<form class='quoteform-fixed'>
</form>