0

Estoy aprendiendo un poco de HTML, CSS, SASS y GULP, estoy intentando hacer una navbar responsive, pero me he dado cuenta que no puedo aplicar gap a ciertos tamaños, ya he usado todos los mediasquerys y no logro dar con el error. introducir la descripción de la imagen aquí

Estos son las dimensiones que he usado para los mediasquerys:

  .header {
      background-color: v.$verde;
      h1 {
        color: v.$blanco;
        text-align: center;
        @include m.tablet {
            margin: 0;
        }
      }

      .contenido-header{
          @include m.tablet {
              display: flex;
              justify-content: space-between;
              padding: 1.5rem;
              align-items: center;
          }
      }
    } 
    .navegacion-principal {
      @include m.tablet {
          display: flex;
          gap: 2rem;
      }      
      a {
        display: block;
        text-align: center;
        color: v.$blanco;
        font-size: 2.4rem;
        margin-bottom: 1rem;
        @include m.tablet {
            margin-bottom: 0;
        }
    <header class="header">
        <div class="contenedor contenido-header">
            <h1>Rock & EDM Festival</h1>

            <nav class="navegacion-principal">
                <a href="#">Line Up</a>
                <a href="#">Galery</a>
                <a href="#">Tickets</a>
            </nav>
        </div>
    </header>

2
  • Podrías adjuntar el HTML? Commented el 15 ene. 2022 a las 15:07
  • Listo ya he añadido el HTML Commented el 17 ene. 2022 a las 3:58

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.