Cuando navegas por internet y entras en alguna página web, no te ha pasado que hay un molesto scroll horizontal. Aparece debajo una barra desplazable que te permite mover todo hacia los lados. Pues bien esto esto es la señal que algo está fallando en el diseño.
Si estás trabajando en WordPress con Elementor, suele ser el header o el footer. Como digo, a veces suelen ser estos elementos los causantes del problema. A mi como diseñador web honestamente me da una rabia esto del scroll que no veas. Ya que visualmente y como experiencia de usuario no es agradable. Bien en este post, te voy a explicar una solución rápida mediante código CSS.
¿Sabes por qué aparece el scroll horizontal en WordPress?
Pues es scroll aparece por que los elementos sobrepasan el ancho de la pantalla y todo se desborda. Te pongo algunas razones:
- Puedes tener imágenes muy grandes: tienes que controlar las dimensiones de las imágenes que subes a tu web.
- Puedes tener elementos mal configurados: puede haber problemas con contenedores que no respetan el ancho de la pantalla.
- Márgenes o paddings negativos: si añades términos negativos también puedes tener problemas.
- También puede ser código CSS: puede darse el caso que tengas anchos fijos que no sean responsive y den problemas.
¿Cuáles son los pasos para eliminar este scroll horizontal en WordPress?
Lo primero de todo tenemos que ver el problema
Si no queremos complicarnos la vida, podemos añadir un CSS general (luego te dejo el código más abajo) y nos quedamos tan anchos. Pero lo interesante es ver que elemento puede estar causando el problema, puedes presionar la tecla F12 de tu teclado o en tu navegador click derecho y buscas inspeccionar.
Luego te vas a la pestaña que dice elementos y intentas ver por las diferentes secciones algo que se salga de los limites de la pantalla. A veces es jodido de verlo, pero si tienes imágenes muy grandes y demás pega un vistazo a esto primero.
Segundo aplicar un CSS maravilloso general
Muchas veces es complicado detectar el elemento que está causando el problema. Pero podemos aplicar un CSS general que elimina directamente el problema, luego después de aplicarlo hay que revisar de nuevo la web..
Luego pinchas dentro y llegarás a una pantalla como esta, donde debes de añadir el código CSS que te voy a pasar.
Luego añades este trozo de código CSS que muestro aquí. Luego obviamente pinchas en «publicar».
Código de CSS para eliminar el scroll
Puede que este trozo de código te solucione el problema si es pequeño, ojo solo esconde el problema. Le estamos diciendo que esconda todo lo que sobresalga de la pantalla. Puede valer como solución temporal, pero mucho mejor si das con el problema rea.
/* Evitar scroll horizontal */
html, body {
max-width: 100%;
overflow-x: hidden;
}
También podemos añadir este código también
Como los vídeos y las imágenes también pueden dar bastantes problemas, podemos añadir esto.
img, video {
max-width: 100%;
height: auto;
display: block;
}
Y ya para rematar por si las moscas
Las tablas o secciones que se salen del diseño también suelen ser problemáticas. Este código crea un desplazable dentro de su propio contenedor.
table {
width: 100%;
overflow-x: auto;
display: block;
}
Para mi honestamente eliminar el scroll este se hace algo personal, jajaja. Ya que dice de tener una web cuidada, profesional y con una buena experiencia de usuario. Si necesitas apoyo profesional para tu proyecto en WordPress no dudes en consultar mis servicios de diseño web experto en WordPress.
negocio
