Foro Anime - Sitio de Anime, Manga, Comics y Videojuegos.
Problemas con el foro - Versión para impresión

+- Foro Anime - Sitio de Anime, Manga, Comics y Videojuegos. (https://foroanime.net)
+-- Foro: COMUNIDAD FA (https://foroanime.net/Foro-COMUNIDAD-FA)
+--- Foro: Soporte General (https://foroanime.net/Foro-Soporte-General)
+--- Tema: Problemas con el foro (/Tema-Problemas-con-el-foro)

Problemas con el foro - Argi - 17-11-2021

Hola! Estuve revisando el código del foro y lo encontré un poco raro.

Voy a mostrar los problemas y posteriormente les busco una solución.
--- EN COMENTARIOS ESTÁ EL
CODIGO QUE SUGIERO---


Mostrar ContenidoVer Imagen:



1) COLUMNA DE CONTENIDO PRINCIPAL ANGOSTA

2) BARRA DE NAVEGACION SE SUPERPONE A OTROS ELEMENTOS, COMO LA CAJA DE USUARIO (ARRIBA A LA DERECHA)

3) EL SITIO NO ES RESPONSIVO


Mostrar ContenidoVer Imagenes:


Donde dice 100% (48% en el código) debe colocarse 1fr

.portal-grid {
  width: 1fr;
}

ESO SOLUCIONA EL PROBLEMA DE QUE LA COLUMNA DE TEMAS ESTÁ ANGOSTA



Mostrar ContenidoVer Imagenes:


Se ve cambiado sólo uno porque yo estaba seleccionando un elemento, pero el problema viene de la clase portal-grid


Si quieren que se pongan de a dos, el contenedor de los portal-grid debería ser grid y decirle que cada portal-grid midan de ancho 0.5fr o menos. Mejor es usar dos columnas de 1fr cada una.

Si quieren hacerlo con flexbox, debería usarse:

.izquierda-portal {
  flex-wrap: wrap;
}

y el ancho de cada portal-grid ser menor a la mitad
QUIZÁS aplicar flex-basis

RE: Problemas con el foro - MarieChan - 17-11-2021

Bueno mencionare algunas cosas primero:

*Se lo mostrare Luis ya que para estas cosas muy tecnicas el es el que las puede arreglar, si es que se puede.

*Tema movido a Soporte General, cuando vayas a reportar alguna cosilla puedes hacerlo en esa zona, te dejo el link del tema en especifico: https://foroanime.net/Tema-En-proceso-Centro-de-quejas-y-errores-2021

*Pls pon las imagenes en spoiler si es que son muy grandes. El tener imagenes y mas varias muy grandes expuestas hace que se pueda ralentizar la pagina. Y si no quieres puedes disminuirles el tama~o.

Saludos~

RE: Problemas con el foro - Argi - 18-11-2021

.portal-grid {
  width: auto;
}



[Imagen: c11.png]



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

RE: Problemas con el foro - Luis_VdM - 22-11-2021

(18-11-2021, 01:25 AM)Argi escribió: .portal-grid {
  width: auto;
}



[Imagen: c11.png]



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é

RE: Problemas con el foro - Argi - 22-11-2021

@Luis_VdM

[Imagen: 2021-11-22-07-38-35.jpg]
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:

[Imagen: HEADER-FINAL.png]

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.
(22-11-2021, 09:26 PM)Luis_VdM escribió:
(18-11-2021, 01:25 AM)Argi escribió: .portal-grid {
  width: auto;
}



[Imagen: c11.png]



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é