[Argi]

@Luis_VdM

---

Bueno, creo que además al .portal-grid deberías cambiarle inline-grid por grid. Esto es porque los que tienen texto solamente se quedan delgados (porque grid se ensancha tofo lo que puede, inline-grid no).

Si te interesan más sugerencias, puedo hacerlas. Aunque el sitio tenga una estructura compleja porque es antiguo, se puede aplicar grid por zonas y así tener mejor control.

te voy a mandar una sugerencia para el header, porque igual ya la hice. La intención es colaborar con una versión móvil tema diurno.

UNA APROXIMACION:



ESTÁ MÁS ANCHA PORQUE OTROS ELEMENTOS LA FUERZAN A ESTIRARSE, pero sería:

[ LOGO ]  |  [LOGIN]
[ BARRA DE NAV ]



HICE ESTO:

Código:

/**** ESTILOS PARA EL HEADER ***/

/* desktop */

menu-principal {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas:
"logo nav login";
}


/* general */

.logo {
grid-area: logo;
justify-self: end;
}

.menu-login {
grid-area: login;
justify-self: start;
width: auto;
}

.menus {
width: auto;
grid-area: nav;
justify-self: center;
}

.menus ul {
max-width: none;
margin: auto;
}


/* mobile */

@media screen and (max-width: 992px) {
.menu-principal {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-template-areas:
"logo login"
"nav nav";
}
}

Bueno, saludos. Ya me metí demasiado, me parece, pero fue sólo por el bien del sitio, que lo veo muy cuidado en general y pienso que puede remontarse otra vez.

Como hoy todos se conectan desde el celular más que desde la PC, quizás no esté de más ponerse al día con los móviles.

.portal-grid {
  width: auto;
}







Generalmente se hace al revés y la versión móvil es la base pero si es más fácil ponerlo así:


@media screen and (max-width: 992px) {
  .izquierda-portal {
     grid-template-columns: 1fr;
  }
}

---

@MarieChan tienes razón, sólo que estaba apurado. Ahora las spoilero

Gracias por la recomendación Argi, nos ayudará mucho a mejorar el sitio. ¿Puedes indicarme qué diseño de foro usas? si me mandas captura del menú superior (cabecera) lo identificaré