Código completo aquí: 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; }

Esta es la secuencia de comandos para alternar la barra de navegación móvil, pero cuando cambio a la vista móvil, está activada de forma predeterminada fuera de los parámetros del sitio web y tengo que apagarla y volver a encenderla.

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

Esta entrada de formulario era demasiado larga en el móvil, pero la solución que encontré hace que se vea terrible

 <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>

Estilo CSS para formulario

 .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; }