Bug en tema Cubic?
-
En la grilla (página principal) las imágenes dentro del cuadrado (3 por línea / ancho) se ven ajustadas al ancho máximo de la imagen. Hasta ayer esto no funcionaba así, la imagen era ajustada centrada (por la altura, no por el ancho).
He aquí de como se ve ahora:
Y como se veía antes:
El blog con el que necesito ayuda es (visible solo para usuarios conectados).
-
En un principio lo arreglé agregando lo siguiente (CSS):
.entry-thumbnail img {
height: 100% !important;
object-fit: cover;
}Mas allá de eso, creo que al CSS algo le pasó, los enlaces relacionados a veces se solapan, otras veces muestra el texto en donde no se debe, otras no alineado… muy raro todo.
-
-
¡Hola!
Veo que lo has arreglado con ese CSS, pero parece que ciertamente hay algún problema. Lo he probado en un par de sitios de prueba y no he podido replicarlo y no parece que los otros códigos que tienes ahí estén causando el desajuste.
Nos comentas que algunos enlaces no se ven bien, ¿tienes algún ejemplo al que podamos echarle un ojo?
¡Un saludo! -
Hola,
Previo al problema el tema con los códigos funcionaba bien. Luego del problema principal que era que no cubriera la imagen de vista previa el cuadrado, lo solucioné agregando object-fit: cover.
En cuanto los enlaces con errores, cuando comenzó a suceder el otro problema, solían quedar mal algunos «enlaces relacionados» (no en todas las páginas, en algunas):
Como ves, en la grilla de enlaces relacionados (usa 3 éste tema) se superponen algunas imágenes. Aparte de superponer las imágenes, en algunos casos los textos de los enlaces estaban descentrados:
Otro ejemplo, la última imagen superpuesta:
Como habrás notado en el CSS personalizado tengo un centrado general ( * {text-align: center;} ) el cual ahora comenté para deshabilitarlo ya que causa el problema de solapamiento.
Si utilizo el siguiente código, el problema de los relacionados se soluciona pero la imagen principal queda corrida para la derecha:
@media screen and (min-width: 768px){ .wp-caption.caption-big, .image-big { margin-bottom: 0px; margin-left: 0px; } }Por defecto utiliza los siguientes valores:
Como puedo centrar todo nuevamente sin que se «rompa» la parte de relacionados?
-
He vuelto a habilitar el centrado, sin el centrado desde pantallas grandes se ve «bien» pero algunas cosas siguen centradas.
Desde el móvil se ve mal.En resumen, lo habilitado:
ARREGLA CUBRIR EL CUADRADO EN PAGINA PRINCIPAL:
.entry-thumbnail img {
height: 100% !important;
object-fit: cover !important;
}ARREGLA CENTRADO DE LOS ENLACES RELACIONADOS, PERO CENTRA A LA DERECHA LA IMAGEN PRINCIPAL:
.image-big {
margin-bottom: 0px;
margin-left: 0px;
} -
Con esta modificacion me ha quedado todo centrado, tanto la imagen principal como las de los enlaces relacionados:
.image-big {
margin-bottom: 1px;
margin-left: 1px;
} -
¡Hola!
Lo he estado revisando todo y el problema parece estar en la configuración de las imágenes en páginas. Mira, he grabado un vídeo para que veas como solucionarlo y que así no tengas que andar ajustando todos esos detalles:
Pruébalo y, si tienes cualquier duda, avísame :)
¡Un saludo!
-
Hola, qué tal? Muchas gracias por tu video.
Al eliminar el código, habilitar la opción en vista previa (editor) se ve bien, pero al verlo en producción se ve nuevamente mal. De todas maneras, el tema del «relleno» del cuadrado ya está solucionado.
Aun me falta ver con más detenimiento el tema del centrado de los post relacionados. Se te ocurre algún código CSS que solo afecte a la parte de relacionados y que quede alineada a la izquierda? // recuerda, está centrada. En los próximos días no estaré disponible, pero en cuanto pueda le entro al código. Gracias nuevamente.
Saludos!
-
¡Hola!
Claro que sí. Este código debería cuadrarlo todo:
/* Ajusta las imágenes de las entradas relacionadas */ #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span { height: 150px; max-width: 100%; margin: 0 auto; margin-bottom: 0px; margin-bottom: 24px; }Como no vas a estar disponible, me he tomado la libertad de añadirlo por ti, pero puedes verlo debajo de los que ya tenías en el Personalizador.
¡Un saludo!
-
Hola!
Muchas gracias! Modifiqué ligeramente tu código (en el móvil al estar la altura en 150px fija quedaba estirada), y quedó todo centrado tal como lo quería.
Puedes dar por cerrado el tema. Saludos, buena jornada.
-
¡Me alegro de leerlo! :)
Ya sabes donde puedes encontrarnos si necesitas cualquier cosa, ¡pasa un buen día!
- El debate ‘Bug en tema Cubic?’ está cerrado y no admite más respuestas.
Foros WordPress.com en Español 