Avisos
Vaciar todo

[Resuelto] Problema descripción imagen en dispositivo móvil  

 
Edith
 Edith
Usuario eminente

Buenos días,

Al agregar una descripción en las imagenes de mis entradas, el tamaño del contenido se distorsiona y queda a un mayor tamaño que la pantalla del dispositivo móvil, tal y como se ve en la imagen anexa, o como se puede verificar en este link de ejemplo https://miviajar.com/volver-a-colombia-despues-de-vivir-en-el-extranjero/ . Saben cómo podría hacer una configuración general en el divi builder para corregir este problema?.

Gracias

WhatsApp Image 2023 06 01 at 11.09.47 AM

 

Contenido solo visible a usuarios registrados

Respondido : 01/06/2023 5:15 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Edith, 

En este caso revisa que ancho le estás asignado al contenedor inicial de tu plantilla de entradas y footer, ya que se desbordan para la opción móvil. Esto puedes revisarlo en los ajustes de la sección de Divi → Avanzado → tamaño

Una opción también que puedes probar es utilizar el siguiente código CSS que puedes añadir en el apartado de Divi → Opciones del tema → general → CSS personalizado


@media only screen and (max-width: 600px) {
* {
overflow-x: hidden;
}
.single.single-post #et-main-area {
width: 380px;
}
}

Verifícalo y nos comentas como va todo

Un Saludo 

Respondido : 01/06/2023 5:58 pm

Edith
 Edith
Usuario eminente

He intentado el código CSS y se me ha roto por completo el diseño de la página, voy a realizar un backup

Respondido : 01/06/2023 6:17 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Edith, 

De acuerdo, luego del backup envíanos una captura como estas añadiendo el código para revisarlo con mayor detalle. 

Un Saludo 

Respondido : 01/06/2023 6:18 pm

Edith
 Edith
Usuario eminente

Te envío una captura del código que tengo actualmente

configuracion css

 

Respondido : 01/06/2023 6:36 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Edith, 

Verifica cuando añadas el código no lo incluyas dentro del código de media queries que tienes ahora abierto, debes añadirlo al final luego de este carácter (}), solo asegurate de dar un salto de línea 

image

Es posible que si lo añades dentro del que está actualmente esto esté generando un error en el sitio web, verificalo y nos comentas como va todo

Un Saludo 

Respondido : 01/06/2023 6:55 pm

Edith
 Edith
Usuario eminente

Qué parte del código debo añadir? No generaría conflicto si ya he establecido un máximo ancho de 450 px, agregar nuevamente un máximo de 600px en @media only screen. Te copio el código que tengo ahora:

@media only screen and (max-width: 450px) {
/*
.single-post iframe {
    overflow: hidden !important;
    max-width: 320px !important;
}
*/
.single-post .comment-body {
    line-break: anywhere;
    white-space: normal;
}
 
#page-container {
    position: absolute;
    top: 0;
}
}
 
Lo raro es que si no agrego descripción a las imágenes, se adapta bastante bien a todas las pantallas, el conflicto lo genera el agregar la descripción únicamente. De hecho cambié el tamaño en una entrada, del ancho en el dispositivo móvil de la imagen, a 300px y funciona mejor, pero no creo que sea la forma correcta de hacerlo.
 
Gracias por tu ayuda
Esta publicación ha sido modificada el hace 4 meses por Edith
Respondido : 01/06/2023 7:01 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Edith, 

Añádelo luego de este cierre

image

De igual forma revisa la plantilla que tienes creada para las entradas y comprueba si tienes alguna configuración añadida dentro de las imágenes o el contenido que genere este comportamiento. 

Un Saludo 

Respondido : 01/06/2023 8:11 pm

Edith
 Edith
Usuario eminente

Definitivamente ese código rompe el diseño. Tengo que hacer nuevamente un backup. No tengo ninguna configuración añadida en las imágenes, pero seguiré mirando. Si quiero agregarlo de alguna otra manera, cuál es la anchura máxima que debo indicar para dispositivos móviles?.

Gracias

Un saludo

Respondido : 01/06/2023 8:52 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Edith,

La anchura máxima depende del dispositivo, para teléfonos es 380 o menos, igualmente usualmente por agregar un solo código CSS no debería romperse el sitio, si lo hace con eliminarlo debería volver a su estado original en caso de no hacerlo entonces el problema puede venir de otro ajuste en tu sitio más allá de un CSS.

¿Puedes enviarnos una captura sin guardar cambios de donde agregas el código que te envío para poder verificar si está faltando un cierre?, adicional has verificado agregarlo al final del todo en Apariencias →  personalizar → CSS adicional?

Un saludo

Respondido : 01/06/2023 10:45 pm

Edith
 Edith
Usuario eminente

Estuve revisando y con cualquier cambio que realice en Divi, opciones del tema, se daña el diseño, por ejemplo desactive donde dice: habilitar imágenes receptivas y tuve el mismo problema, aún ingresando el código que ya tenía en CSS personalizado se rompe el diseño, logré "arreglarlo" vaciando la caché Varnish. También pienso que el problema viene de otra parte, algún plugin en conflicto o algo que no está bien configurado, no sé.

En apariencias, personalizar, CSS adicional, no he probado, ahí tengo el código anterior. Voy a intentarlo y te envío el pantallazo, a ver si estoy haciendo algo mal.

Gracias por tu ayuda

Respondido : 02/06/2023 1:10 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Edith.

Ok, dejamos el hilo abierto por si necesitas retomarlo.

 

Un saludo

Respondido : 02/06/2023 9:36 am

Edith
 Edith
Usuario eminente

Buenos días Pepe,

He aplicado el código en en Apariencias →  personalizar → CSS adicional. Solo cambié el ancho del final, de 380px a 360px, pq se veía más ancho el contenido en el móvil. Parece que el problema generado por la descripción de la imagen en el teléfono se ha corregido. Sin embargo surgen otros problemas en la pantalla móvil, se marcan pequeñas líneas verticales de color gris como se ve en la foto anexa, como indicando cierre. Además, en la parte de la foto de autor del post, el texto no se ubica al lado derecho de la imagen, dejando un vacío entre el nombre y el texto. ¿Qué puedo hacer para corregir esos nuevos problemas?.

Gracias por la paciencia y colaboración

Un saludo

vacio lado
WhatsApp Image 2023 06 02 at 8.13.48 AM
personalizar css

 

Respondido : 02/06/2023 2:28 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Edith

Por favor abre otra consulta que en esta tratamos un tema distinto con varios codigos y puede llevar a confusión.

En estos casos, es mejor que si son temas diferentes crees consultas separadas para que podamos realizar un mejor seguimiento a tus dudas o errores.

De esta forma mantenemos un orden en el Foro y nos ayudas a nosotros en el trabajo, aparte te resultará más fácilmente encontrar las consultas de un tema si lo necesitas más adelante.

 Cierro esta consulta que ya está solucionada y lo revisamos en la consulta nueva

Un saludo

 

Esta publicación ha sido modificada el hace 4 meses por Pepe
Respondido : 02/06/2023 2:38 pm