Bienvenidx a Foro Anime - Sitio de Anime, Manga, Comics y Videojuegos.

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.




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




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





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

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-Ce...rores-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~

.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

(18-11-2021, 01:25 AM)Argi escribió: .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é

@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:

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;
}







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é