Media query doesn't seem to work

need help with my code as it seems the browser is not responding to the media query and I’m not sure why. if anyone can take a look and help, I’d appreciate it.
here is what I have so far in HTML and CSS.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>X Website</title> <link rel="stylesheet" href="./styles.css"> </head> <body> <nav class="navbar"> <div class="navbar__container"> <a href="/" id="navbar__logo">NEXT</a> <div class="navbar__toggle" id="mobile-menu"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> <ul class="navbar__menu"> <li class="navbar__item"> <a href="/" class="navbar__links">Home</a> </li> <li class="navbar__item"> <a href="./tech.html" class="navbar__links">Tech</a> </li> <li class="navbar__item"> <a href="/" class="navbar__links">Products</a> </li> <li class="navbar__btn"> <a href="/" class="button">Sign Up</a> </li> </ul> </div> </nav> </body> </html> ------------------------------------------------------- * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; } .navbar { background: #131313; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; position: sticky; top: 0; z-index: 999; } .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 50px; } #navbar__logo { background-color: #ff8177; background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; display: flex; align-items: center; cursor: pointer; text-decoration: none; font-size: 2rem; } .fa-gem { margin-right: 0.5rem; } .navbar__menu { display: flex; align-items: center; list-style: none; text-align: center; } .navbar__item { height: 80px; } .navbar__links { color: white; display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 0 1rem; height: 100%; } .navbar__btn { display: flex; align-items: center; justify-content: center; padding: 0 1rem; width: 100%; } .button { display: flex; align-items: center; justify-content: center; text-decoration: none; padding: 10px 20px; height: 100%; width: 100%; border: none; outline: none; border-radius: 4px; background: #f77062; color: #fff; } .button:hover { background: #4837ff; transition: all 0.3s ease; } .navbar__links:hover { color: #f77062; transition: all 0.3s ease; } @media screen and (max-with: 960px) { .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; padding: 0; } .navbar__menu { display: grid; grid-template-columns: auto; margin: 0; width: 100%; position: absolute; top: -1000px; opacity: 0; transition: all 0.5s ease; height: 50vh; z-index: -1; background: #131313; } .navbar__menu.active { background: #131313; top: 100%; opacity: 1; transition: all 0.5s ease; z-index: 99; height: 50vh; font-size: 1.6rem; } #navbar__logo { padding-left: 25px; } .navbar__toggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } .navbar__item { width: 100%; } .navbar__links { text-align: center; padding: 2rem; width: 100%; display: table; } #mobile-menu { position: absolute; top: 20%; right: 5%; transform: translate(5%, 20%); } .navbar__btn { padding-bottom: 2rem; } .button { display: flex; justify-content: center; align-items: center; width: 80%; height: 80px; margin: 0; } .navbar__toggle .bar { display: block; cursor: pointer; } #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; } #mobile-menu.is-active .bar:nth-child(1) { opacity: 0; transform: translateY(8px) rotate(45deg); } #mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } }

Hi there,

It looks like you have “width” spelled wrong. Give that a fix and see what happens.

@kirativewd You are a life saver!! I knew it was something silly but was not able to catch it. Thank you for taking the time!

1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.