Scroll horizontal WordPress: imágenes y el bug #62411

En pocas palabras: El scroll horizontal en la pantalla de detalles de temas del admin de WordPress fue eliminado con el commit ceb9b355 de Jb Audras, que aplicó margin:0 a .theme-overlay .theme-screenshots y cerró el ticket #62411. Si tu WordPress está actualizado, ya no lo ves.

WordPress mergeó un fix para el scroll horizontal molesto que aparecía en la pantalla de detalles de temas del admin. El commit ceb9b355, a cargo de Jb Audras, metió una sola línea de CSS —margin: 0— dentro de la media query móvil del selector .theme-overlay .theme-screenshots, y con eso resolvió el ticket #62411 que venía dando vueltas desde noviembre. Si tu WordPress está actualizado a cualquier versión posterior a ese merge, el problema ya no existe (al menos en el admin).

El scroll horizontal en WordPress es un desplazamiento lateral indeseado que aparece cuando algún elemento de la página —una imagen, un contenedor, un margen heredado— se estira más allá del ancho del viewport, y el navegador, obediente, te habilita una barra de desplazamiento que nadie pidió. En móviles es particularmente irritante porque rompe el flujo de lectura vertical y, peor, oculta contenido que se va para la derecha sin que el usuario se entere.

¿Qué es el scroll horizontal en WordPress y por qué afecta la experiencia móvil?

El scroll horizontal —técnicamente, desbordamiento en el eje X— es cuando un elemento de la página excede el ancho del viewport y el navegador responde con una barra de desplazamiento lateral. En WordPress, esto puede pasar tanto en el frontend como en el panel de administración, y el resultado es siempre el mismo: una experiencia de navegación que se siente rota.

En escritorio zafa —molesto, pero zafa—. En móvil es donde realmente jode: el usuario hace scroll vertical leyendo contenido y de repente el dedo se va para el costado, la página se mueve horizontalmente y queda un espacio en blanco a la derecha que no debería existir. Google además penaliza el desplazamiento horizontal en móviles dentro de Core Web Vitals, así que no es solo un problema estético.

¿Por qué algunas imágenes desbordan el ancho de la pantalla?

La causa más común es una imagen con ancho fijo en píxeles metida dentro de un contenedor que no la limita. Ponele que tenés un <img width="1200"> dentro de un div que en móvil mide 375px —si no hay un max-width: 100% que la frene, la imagen se va de mambo y arrastra todo el layout con ella. Te puede servir nuestra cobertura de la guía completa de la comunidad WP.

Otros culpables frecuentes:

• Contenedores con overflow: visible (el default). Si el padre no oculta el excedente, el desborde se propaga hacia afuera como mancha de aceite.
• Márgenes y paddings fijos en píxeles. Un margin-right: 30px en un elemento que ya ocupa el 100% del ancho te suma 30px extra que el viewport no tiene.
• Falta de max-width: 100% en imágenes. Es la regla de oro que todo tema debería traer por defecto en su CSS reset. Increíblemente, muchos themes —incluso algunos populares— todavía no la incluyen, o la incluyen pero con una especificidad tan baja que otros estilos la pisan.
• Capturas de pantalla con estilos heredados de escritorio. Este fue exactamente el caso del ticket #62411 en el admin de WordPress.

¿Qué fallaba en la pantalla de detalles de temas de WordPress?

El bug vivía en el modal de detalles de temas del administrador, específicamente en el contenedor .theme-overlay .theme-screenshots. Este contenedor mostraba las capturas de pantalla del tema y tenía un margen derecho pensado para escritorio —para alinear visualmente las imágenes dentro del panel—, pero los media queries móviles no lo reseteaban.

Resultado: cuando abrías los detalles de un tema desde un viewport menor a 782px (una tablet en vertical o un celular), ese margen empujaba todo el contenedor más allá del ancho disponible. La página del admin se volvía scrolleable horizontalmente. Nada trágico, pero sí molesto para cualquiera que revisara temas desde el celular (que no serán mayoría, pero existimos).

¿Cuál fue el arreglo oficial de WordPress?

Jb Audras (audrasjb) mergeó el commit ceb9b355 en el repositorio oficial. El cambio fue quirúrgico: una sola propiedad CSS dentro del media query @media screen and (max-width: 782px).

La regla agregada fue:

.theme-overlay .theme-screenshots { margin: 0; }

Nada más. Un margin: 0 que resetea el margen derecho heredado del layout de escritorio. Los archivos tocados fueron cuatro: wp-admin/css/themes.css, wp-admin/css/themes-rtl.css y sus respectivas versiones minificadas. También se actualizó wp-includes/version.php para el bump de revisión de base de datos.

El fix cerró el ticket #62411 y se incorporó a la rama trunk, que después llegó a versiones recientes de WordPress. Si al 3 de agosto de 2026 todavía ves ese scroll en el admin, es porque tu instalación quedó congelada en una versión vieja —actualizala, no hay excusa.

¿Cómo aplicar la solución si tu WordPress todavía muestra el error?

Si por algún motivo no podés actualizar WordPress (mala idea, pero bueh), podés inyectar el CSS correctivo vos mismo en el admin. Vas a necesitar un pequeño snippet en el functions.php de tu tema o, mejor, un plugin mu simple de CSS personalizado para el admin. Sobre eso hablamos en como crear una landing page en WordPress.

El código que necesitás es este:

@media screen and (max-width: 782px) { .theme-overlay .theme-screenshots { margin: 0 !important; } }

Para inyectarlo, enganchate a admin_head:

add_action('admin_head', function() { echo '<style>@media screen and (max-width: 782px) { .theme-overlay .theme-screenshots { margin: 0 !important; } }</style>'; });

Ojo: esto solo arregla el bug específico del admin. Si el scroll horizontal te aparece en el frontend, el problema es otro —probablemente una imagen gigante o un contenedor mal declarado en tu tema— y vas a tener que debuguearlo con DevTools.

¿Cómo detectar qué elemento causa el scroll horizontal en tu sitio?

Abri las DevTools del navegador (F12), activá el modo dispositivo (Ctrl+Shift+M), y empezá a revisar. La técnica infalible es esta: seleccioná elementos de afuera hacia adentro y fijate cuál tiene un ancho computado mayor al del viewport.

Un truco que uso hace años: poné * { outline: 1px solid red; } temporalmente en el inspector. Todos los elementos se marcan con un borde rojo, y el que sobresale del viewport se delata solo —vas a ver la línea roja pasada del borde derecho. Después revisás la pestaña «Styles» de ese elemento y buscás widths fijos, márgenes en píxeles, o la ausencia sospechosa de max-width: 100% en imágenes. Para más detalles técnicos, mirá cómo usar un entorno de staging.

También podés ir eliminando elementos con la tecla Suprimir en el inspector hasta que el scroll horizontal desaparezca. Cuando desaparezca, el último elemento que borraste es el culpable (o su padre directo). Vas iterando desde los contenedores más externos hacia adentro, como quien pela una cebolla buscando la capa podrida.

¿Qué buenas prácticas evitan desbordes horizontales en WordPress?

La regla de oro que todo desarrollador WordPress debería tatuarse:

img { max-width: 100%; height: auto; }

Eso solo resuelve el 80% de los casos. Pero hay más:

• Usá overflow-x: clip en vez de hidden. Hidden oculta el contenido que desborda silenciosamente —el problema sigue ahí pero no lo ves—, mientras que clip directamente trunca el renderizado y además no crea un nuevo contexto de scroll. Es más performante y más honesto.
• Probá las capturas de pantalla y galerías en viewports chicos. Las imágenes de screenshots de themes y plugins suelen venir en resoluciones pensadas para escritorio (1200px de ancho o más). Si tu galería no es responsive, van a desbordar sí o sí.
• Revisá los estilos de terceros. Plugins que injectan su propio CSS pueden traer reglas con !important que pisan tu max-width. Si usás un builder como Elementor o Bricks, cada bloque puede tener sus propios ajustes de ancho que ignoran lo que declaraste en el tema.
• Hacé tests en dispositivos reales. El modo dispositivo de Chrome es buenísimo, pero no reemplaza probar en un celu de verdad. Hay comportamientos de overflow que solo se disparan con el viewport real de Mobile Safari o Chrome Android.

Si estás desarrollando local y después subís el sitio a un hosting WordPress como el de Donweb, revisá que los paths de imágenes no se rompan en la migración —a veces la URL cambia, la imagen no carga, y el espacio reservado por el width del <img> sigue generando overflow aunque la imagen esté rota. Un alt vacío con 1200px de ancho fantasma es un clásico.

Errores comunes al intentar arreglar el scroll horizontal

He visto cada intento de solución que terminó siendo peor que el problema original. Acá van los tres más frecuentes:

1. Poner overflow-x: hidden en el body y creer que está todo bien. Es como tapar el olor a gas con desodorante de ambiente —el problema de fondo sigue ahí, y además estás ocultando contenido que quizás el usuario necesita ver. Peor todavía si lo ponés con !important y después te preguntás por qué tus popups y mega-menús no se despliegan correctamente.

2. Aplicar max-width: 100% solo a img y olvidarse de iframe, video, embed y table. Un embed de YouTube, un video de Vimeo o una tabla de precios de WooCommerce también pueden desbordar. La regla completa debería ser:

img, iframe, video, embed, object, table { max-width: 100%; height: auto; } Tema relacionado: en el artículo sobre enlaces rotos.

Y aun así se te va a escapar algún svg con viewBox raro o un canvas generado por un plugin de gráficos.

3. Asumir que el error es del tema cuando en realidad es una imagen que subió el cliente. El cliente sube una captura de pantalla de 2560px de ancho, la mete en un bloque de Gutenberg a tamaño completo, y te llama diciendo «el sitio se rompió». ¿La solución? Configurar que WordPress genere tamaños de imagen razonables (en Ajustes > Medios) y educar al cliente —o directamente instalar un plugin que limite el ancho máximo de subida y redimensione en caliente. Duele menos.

Preguntas Frecuentes

¿Por qué algunas imágenes causan scroll horizontal en WordPress?

Porque el ancho de la imagen o de su contenedor excede el ancho del viewport. Las causas típicas son imágenes con width fijo en píxeles (1200px, 1920px), márgenes o paddings no responsivos, y la ausencia de max-width: 100% en la hoja de estilos del tema. En el admin de WordPress, el bug #62411 afectaba las capturas de pantalla de temas en móviles.

¿Cómo quitar la barra de desplazamiento horizontal en WordPress?

Identificá el elemento que desborda con las DevTools del navegador en modo dispositivo. Luego aplicá la solución específica: si es una imagen, agregale max-width: 100%; height: auto;. Si es un contenedor, revisá márgenes y paddings fijos. Si es un bug del admin como el #62411, actualizá WordPress —el fix ya está incluido en las versiones actuales. No uses overflow-x: hidden en el body como solución genérica, oculta el síntoma pero no la causa.

¿Qué causa el desbordamiento horizontal en el móvil?

Cualquier elemento cuyo ancho computado (contenido + padding + borde + margen) supere el ancho del viewport móvil. Imágenes gigantes, tablas anchas, iframes con width fijo, y contenedores con margin-right en píxeles son los sospechosos habituales. También, combinaciones de width: 100% con padding que rompen el modelo de caja porque falta box-sizing: border-box.

¿Por qué mi sitio WordPress se desplaza horizontalmente en el móvil?

Probablemente tengas una imagen, video, tabla o contenedor cuyo ancho excede el viewport. Abrí las DevTools en modo dispositivo, inspeccioná los elementos uno por uno, y buscá el que sobresale del borde derecho. La causa raíz suele ser CSS faltante (max-width) o márgenes fijos que no se ajustan en media queries móviles.

Conclusión

El bug #62411 ya es historia —WordPress lo arregló con un margin: 0 y el fix está disponible en todas las versiones recientes. Si al 3 de agosto de 2026 seguís viendo scroll horizontal en el admin, actualizá; si lo ves en el frontend, el problema está en tu tema o en el contenido que subiste, no en el core.

El diagnóstico con DevTools es rápido si sabés qué buscar: elemento que sobresale, widths fijos, márgenes heredados. La solución casi nunca es overflow-x: hidden —eso es un parche— sino revisar el CSS, poner max-width: 100% donde corresponda y probar en viewports reales. Los clientes van a seguir subiendo screenshots de 4K, y mientras tanto, saber debuguear overflow horizontal te ahorra llamados de emergencia un domingo a la tarde. Y eso, te lo digo por experiencia, no tiene precio.

Fuentes

• WordPress Trac – Ticket #62607 — Reporte original del bug de scroll horizontal en la pantalla de detalles de temas.
• GitHub – Commit ceb9b355 — Fix mergeado por audrasjb con la regla CSS correctiva.
• WordPress Trac Mailing List – Noviembre 2024 — Discusión del ticket #62411.