¿Te ha pasado que entras a tu web en WordPress desde el móvil o el pc y aparece un molesto scroll horizontal? Esa barra desplazable que aparece y te permite moverte hacia los lados, pues esta señal quiere decir que algo no va bien en el diseño de tu web.
Aparte visualmente y como experiencia de usuario no suele ser agradable, más bien incómodo. Pero lo peor de todo es que parece que tu web no está bien hecha, y eso sí que es una movida, la verdad. Pero no te preocupes, te explico la solución de forma sencilla mediante un trozo de código de CSS.
¿Por qué aparece el scroll horizontal?
Pues bueno generalmente ocurre porque los elementos sobrepasan el ancho de la pantalla, te detallo algunas de las razones:
- Imágenes demasiado grandes: si has subido una imagen enorme y no se adapta bien a los contenedores.
- Elementos con width: 100vw: el famoso truco para que una sección ocupe todo el ancho. En ordenadores con barra de desplazamiento, 100vw es un poco más ancho que la ventana y aparece el scroll. Mejor 100%.
- Algunos elementos mal configurados: una sección que no respeta el ancho de la pantalla, o una tabla por ejemplo también.
- Márgenes o paddings negativos: a veces puede ocurrir que los valores negativos hagan que sobresalgan de los contenedores.
- Código de CSS: puede darse el caso de clases con ancho fijos y que no responden bien a las pantallas pequeñas.
Pasos para eliminar el scroll horizontal en WordPress
Identificar el problema
Antes de aplicar un CSS general podemos optar por otra solución si te manejas con algo de código. Puedes utilizar las herramientas para desarrolladores del navegador presionando la tecla F12, o con clic derecho y «Inspeccionar». Luego seleccionas la pestaña «Elementos» y pasas el ratón por las diferentes secciones de tu web para buscar algo que salga de los límites de la pantalla.
Un truco más rápido: en la pestaña «Consola», pega esta línea y pulsa Enter. Te lista los elementos que se salen por la derecha:
document.querySelectorAll(‘*’).forEach(e => { if (e.getBoundingClientRect().right > document.documentElement.clientWidth) console.log(e); });
Aplicar un CSS general
Honestamente lo que te he comentado antes nunca lo hago, directamente aplico este pequeño truco y examino de nuevo la web. A veces, es más fácil de ver qué está causando el problema o directamente lo solucionas. Debes entrar en tu WordPress y, en la pantalla de la home, arriba a la izquierda, pinchar en «Personalizar». (Si usas un tema de bloques, esta opción no aparece: añade el CSS desde el editor del sitio, en «Estilos» › «CSS adicional». Y si trabajas con Bricks, en sus ajustes, en «Código personalizado».)
Y luego te aparece una pantalla como la siguiente, te diriges a la pestaña de CSS adicional.
Añades el código que te voy a mostrar a continuación y pinchas en «publicar».
El código de CSS general para eliminar el scroll
Este trozo de código de CSS elimina por completo el desplazamiento horizontal, pero ojo: no soluciona el problema de fondo, solo lo esconde. Te puede valer como algo temporal.
/* Evitar scroll horizontal */
body {
max-width: 100%;
overflow-x: clip;
}
Antes se hacía con overflow-x: hidden (y lo verás en muchas guías), pero tiene una pega gorda: rompe los menús y elementos fijos con position: sticky, que dejan de quedarse pegados arriba. overflow-x: clip hace lo mismo sin ese problema y lo entienden todos los navegadores actuales.
Corregir algunos elementos problemáticos por si las moscas
Una vez que has identificado el problema, puedes aplicar algunas de estas soluciones. Añades el código en el mismo lugar que antes hemos comentado.
Puedes utilizar el max-width en imágenes y vídeos para que no se salgan de sus contenedores.
img, video {
max-width: 100%;
height: auto;
display: block;
}
También revisar los márgenes negativos
Si un margen está causando el problema, lo corregimos inspeccionando el elemento y ajustándolo.
.elemento {
margin: 0;
padding: 0;
}
Algunas tablas o bloques grandes
Es posible, que tengas algunas tablas o secciones que se salen del diseño, puedes añadir este código. Esto hará que las tablas sean desplazables dentro de su propio contenedor (realmente muy útil).
table {
width: 100%;
overflow-x: auto;
display: block;
}
Sin duda eliminar el scroll horizontal en WordPress no solo mejora la experiencia de usuario, sino que transmite una imagen más profesional de tu sitio. ¿Tienes dudas respecto a todo este tema? Si necesitas apoyo profesional para tu WordPress, consulta mi servicio de diseño web WordPress en Castellón.
