I am currently working on making a desktop-sized website responsive. However, I have encountered an issue where the CSS rule is being read by the browser but not executed, regardless of whether the media query rule is true or not. I have already included
<meta content="width=device-width, initial-scale=1" name="viewport" />div class="nav">
<div class="logo"><a href="index.html">GETTI</a></div>
<div class="nav-menu">
<div class="menu-item"><a href="#">Home</a></div>
<div class="menu-item"><a href="#">Why Choose Us</a></div>
<div class="menu-item"><a href="#">How it works</a></div>
<div class="menu-item"><a href="#">Teams</a></div>
<div class="menu-item"><a href="#">Contacts</a></div>
</div>
CSS:
@media screen and (max-width: 768px) {
body {
width:100%;
}
.nav-menu {
display:none;
}
}
I suspect that the issue may be related to how the non-responsive CSS was written, so I will also include that for reference.
.nav-menu {
display: -ms-grid;
display: grid;
-ms-grid-columns: (20%)[auto-fill];
grid-template-columns: repeat(auto-fill, 20%);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
line-height: 100%;
}