Avisos
Vaciar todo

Imagen principal de un post no es responsive

4 Respuestas
2 Usuarios
0 Reactions
9 Visitas
Respuestas: 15
Active Member
Topic starter
 

Buenos días: 

La imagen principal de los posts no es responsive. En el móvil, no se ajusta a la pantalla, y hace que todo el post pueda moverse de izquierda a derecha. 

Este sería un post de ejemplo:

https://torreviejatranslation.com/elche-spain

Quizás sea algo de estilos, pero no estamos seguros, ¿podríais echarnos una mano?

Muchas gracias y un saludo,

David

Contenido solo visible a usuarios registrados


 
Respondido : 07/06/2021 9:14 am
Karen Rios
Respuestas: 18667
Illustrious Member Moderator
 

Hola David, 

Entiendo, en este caso para ajustar el tamaño de la imagen en dispositivos móvil puedes probar el siguiente código CSS. 


@media only screen and (max-width: 600px) {
.post-image {
min-width: 100%!important;
height: auto!important;
}
}

Debes añadirlo en el apartado Apariencia -> Personalizar -> CSS Adicional

Verifica si con ello logras configurar que la imagen se ajuste de forma correcta

Un Saludo 


 
Respondido : 07/06/2021 12:08 pm
Respuestas: 15
Active Member
Topic starter
 

@karen mucha gracias por la ayuda. 

Lo he puesto directamente al final de style.css porque la opción CSS adicional no me aparece en personalizar. No obstante, ha reducido la imagen, pero en el móvil se puede desplazar to el bloque del poste de izquierda a derecha, justo como antes. ¿Tendríamos que cambiar del ancho?

Muchas gracias 🙂

David


 
Respondido : 07/06/2021 3:18 pm
Karen Rios
Respuestas: 18667
Illustrious Member Moderator
 

Hola David, 

Gracias a ti, siempre es un placer poder ayudarte. En este caso añade la siguiente regla dentro de las opciones de tu archivo style.css

body.single.single-post {
margin-top: 0px;
overflow-x: hidden;
}

Si deseas aplicarlo solo a la versión móvil debes añadirlo dentro del código anterior, por ejemplo

@media only screen and (max-width: 600px) {
.post-image {
min-width: 100%!important;
height: auto!important;
}

body.single.single-post {
margin-top: 0px;
overflow-x: hidden;
}
}

Comprueba si con esto se elimina el scroll horizontal que se muestra

Un Saludo 


 
Respondido : 07/06/2021 3:23 pm