Issue with #media rule - html

Question

So I was at work making a page and i put my #media rules in a responsive.css file. So it worked all fine, until i uploaded to server and the responsive.css is still being called but none of its rules are working. i also found this to be the case at home as well. Any ideas why this might be?
below is my links i used.
and the responsive.css file.
again this works at work but not anywhere else, the styles .css works fine so does my jquery scripts.
Thanks in advance
(unable to show full code for CopyR reasons)
mobilenav {
display: none;
font-size: 450%;
position: fixed;
right: 0;
top: 0;
height: 1em;
z-index: 10;
justify-content: center;
align-items: center;
align-content: center;
width: 20%;
background-color: var(--katlgreen);
}
mobilenav h1 {
background-color: transparent;
}
navmenu {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
background-color: var(--katdgreen);
z-index: 9;
}
navmenu a {
margin-left: 2em;
font-size: 150%;
margin-top: 3em;
font-weight: 900;
}
/* columns and removes */
#media only screen and (max-width: 1200px) {
td {
font-size: 90%;
}
}
#media only screen and (max-width: 950px) {
column {
width: 48%;
margin-top: 1em;
}
}
#media only screen and (max-width: 450px) {
column {
width: 98%;
margin-top: 1em;
}
#estlogo {
display: none;
}
brandbuttons {
display: none;
}
nav {
display: none;
}
tab {
display: none;
}
header {
background-color: var(--katlgreen);
margin-bottom: 1em;
height: 5em;
align-content: center;
}
mobilenav {
display: flex;
}
#katlogo {
margin: auto 5%;
}
}
/* columns and removes */
#media only screen and (min-width: 951px) and (max-width: 1200px) {
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 750px) and (max-width: 950px) {
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 360px) and (max-width: 749px) {
* {
font-size: 98%;
}
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
nav {
width: 80%;
}
tabline {
width: 85%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
}
#media only screen and (min-width: 250px) and (max-width: 359px) {
* {
font-size: 98%;
}
#katlogo {
width: 100px;
}
}
#media only screen and (max-width: 250px) {
* {
font-size: 96%;
}
#katlogo {
width: 80px;
}
}
/* mobile change hdr tab to menu complete
/* vs device delete second logo and remove 2 buttons. complete
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="functions.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

Answer 1

perhaps use min-width instead of max-width

Answer 2

Best method i found to fix this soulution is adding the following meta code for mobile responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">