输入字段和导航栏没有响应。我做错什么了？

Question

完整代码：https://github.com/akashpandya/Portfolio

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: 0;
    z-index: 2;
    text-align: left;
    transition: 1s;
}

这是切换移动导航栏的脚本，但是当我切换到移动视图时，默认情况下它在网站范围之外打开，我必须将其关闭然后再打开。

<script>
      var navlinks = document.getElementById("navLinks");
      function showMenu() {
        navlinks.style.right = "0";
      }
      function hideMenu() {
        navlinks.style.right = "-200px";
      }
    </script>

这个表单输入在移动设备上太长了，但我发现的修复让它看起来很糟糕

 <form>
            <input type="text" class="grid-item" placeholder="Name:" id="name" />
            <input type="Email" class="grid-item" placeholder="Email:" id="email" />
            <input type="number" class="grid-item" placeholder="Phone Number:" id="phone" />
            <label for="textarea">Your Message Here:</label>
            <textarea type="text" class="grid-item" id="msg"> </textarea>
</form>

表单的 CSS 样式

.contact {
  width: 60%;
  margin: auto;
  text-align: center;
  margin-top: 150px;
  border: 1px solid #f44336;
  border-radius: 10px;
}

form {
  display: grid;
  grid-template-columns: repeat(auto-fit, (2, 1fr));
}
.grid-item {
  background-color: #fff3f3;
  text-align: center;
  margin: 10px 35px;
  border: #fff3f3;
  padding: 10px;
}
#phone,
#msg,
#btn {
  grid-column: span 2;
}
#btn {
  margin: 10px auto;
  padding: 2px 20px;
  border: 1px solid #f44336;
  background: #fff;
  border-radius: 4px;
  transition: 0.5s;
  cursor: pointer;
}
#btn:hover {
  background: #f44336;
}
label {
  text-align: start;
  margin: 0 30px;
  color: #777;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  padding-top: 20px;
}
::placeholder {
  color: #777;
  font-size: 14px;
}

Answer 1

将.nav-links 样式设置为right: -200px;

@media (max-width: 700px) {
  .nav-links {
    position: absolute;
    background: #f44336;
    height: 100vh;
    width: 200px;
    top: 0;
    right: -200px;
    z-index: 2;
    text-align: left;
    transition: 1s;
}