Hola tengo esta navbar html:
<nav class="navbar">
<div class="container">
<!-- Logo a la izquierda -->
<a class="navbar-brand" href="#">
<img src="{% static 'sorteo/images/LogoAmigoInvisible.webp' %}" alt="Logo">
</a>
<!-- Botones a la derecha -->
<div class="navbar-nav">
<button class="button-navbar-recuperarSorteo">Recuperar Sorteo</button>
<button class="button-navbar-findder">By findder</button>
</div>
</div>
</nav>
La cual modifico su tamaño utilizando las siguientes media query:
@media (min-width: 300px){
.navbar {
padding: 10px 10px;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
margin: auto;
}
img {
width: 100%;
}
.navbar-brand {
width: 50%;
}
.navbar-nav {
display: flex;
gap: 10px;
width: 50%;
justify-content: end;
}
.button-navbar-recuperarSorteo {
@include botonPrincipal(43%);
}
.button-navbar-findder {
@include botonFindder(43%);
}
Esta media query se ejecuta cuando la pantalla tiene 300px de ancho y luego tengo otra que se ejecuta con 525 px que es esta:
@media (min-width: 525px) {
.navbar-brand {
width: 35%;
}
.navbar-nav{
width: 65%;
}
.button-navbar-recuperarSorteo {
@include botonPrincipal(50%);
}
.button-navbar-findder {
@include botonFindder(50%);
}
}
Por algún motivo la media query pequeña tiene prioridad y la grande que debería remplazar a la pequeña "sobrescribiendo los cambios" no lo hace
max-width