media queries in css not working properly, brackets

Question

been trying to do a Nav bar, though through live stream it the @.media command does not effect my coding, no idea why. it should just keep a home sign in mobile state, though it does not effect it all. using chrome browsers, Brackets.

help me please.

----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/

nav,
header,
footer {
  display: block;
}

body {
  line-height: 1;
  margin: 0;
}


/*################Nav Bar##################*/

nav {
  width: 100%;
  margin: 0;
}

nav ul {
  background-color: #eee;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li {
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right {
  float: right;
}

ul.topnav li a {
  display: block;
  text-decoration: none;
  min-height: 16px;
  text-align: center;
  padding: 14px;
  text-transform: uppercase;
  color: #666;
}

ul.topnav li a:hover {
  background-color: #0080ff;
  color: #fff;
}

ul.topnav li.dropdownIcon {
  display: none;
}


/*################# mobile #############*/

u/media screen and (max-width: 680px) {
  ul.topnav li:not(:nth-child(1)) {
    display: none;
  }
}

<!doctype html>

<html lang="en">



<head>

  <title> MY CSS website</title>

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav>

    <ul class="topnav">

      <li><a href="#home>">Home</a></li>

      <li><a href="#news>">News</a></li>

      <li><a href="#contact>">Contact</a></li>

      <li><a href="#about>">About</a></li>

      <li class="topnav-right"><a href="#signup>">Sign Up</a></li>

      <li class="topnav-right"><a href="#signin>">Sign In</a></li>

      <li class="dropdownIcon"><a href="">\&#9776;

</a></li>

    </ul>

  </nav>

</body>

</html>

despite the fact that you wrote `u/media screen` where it should say `@media screen` it works... — Torf, Jun 29 '20 at 14:15

score 0 · Answer 1 · answered Jun 29 '20 at 14:06

Seems to work fine for me. Try this code and you should also include <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your head

----------------------------------------------------------------------- css stylesheet
/*#################Defults############*/

nav,
header,
footer {
  display: block;
}

body {
  line-height: 1;
  margin: 0;
}


/*################Nav Bar##################*/

nav {
  width: 100%;
  margin: 0;
}

nav ul {
  background-color: #eee;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

ul.topnav li {
  list-style: none;
  float: left;
}

ul.topnav li.topnav-right {
  float: right;
}

ul.topnav li a {
  display: block;
  text-decoration: none;
  min-height: 16px;
  text-align: center;
  padding: 14px;
  text-transform: uppercase;
  color: #666;
}

ul.topnav li a:hover {
  background-color: #0080ff;
  color: #fff;
}

ul.topnav li.dropdownIcon {
  display: none;
}


/*################# mobile #############*/

@media screen and (max-width: 680px) {
  ul.topnav li:not(:nth-child(1)) {
    display: none;
  }
}

<!doctype html>

<html lang="en">



<head>

  <title> MY CSS website</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav>

    <ul class="topnav">

      <li><a href="#home>">Home</a></li>

      <li><a href="#news>">News</a></li>

      <li><a href="#contact>">Contact</a></li>

      <li><a href="#about>">About</a></li>

      <li class="topnav-right"><a href="#signup>">Sign Up</a></li>

      <li class="topnav-right"><a href="#signin>">Sign In</a></li>

      <li class="dropdownIcon"><a href="">\&#9776;

</a></li>

    </ul>

  </nav>

</body>

</html>

I don't know now its stuck in mobile state and when the screen px>then 680px still in mobile screen mode, and it wont develope to the desired screen, might the problem be in my computer? i have the latest version of brackets — FailerUnknown, Jun 29 '20 at 14:17
Try to refresh the page's cached css with ctrl + F5 sometimes I need to do this when I've uploaded changes to the css. Also I would recommend you try notepad++ instead of brackets if you think that is the problem although I doubt it. In my preference notepad++ is better anyways if you haven't tried it you should. — Blomqen, Jun 29 '20 at 14:21

media queries in css not working properly, brackets

1 Answers1