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