CSS+Fácil – Cómo eliminar el scroll horizontal

El scroll horizontal, esa consecuencia del caos estructural en el código de una web que muchas veces puede darnos un verdadero dolor de cabeza, incluso a los que tenemos más experiencia arreglando errores de CSS. Los que seáis más nuevos en el diseño web, debéis saber que permitir scroll horizontal en una web es falta gravemente a los mandamientos del Responsive Design.

Y no penséis que una vez erradicado no puede volver. El scroll horizontal es una mala hierba que puede volver a salir en cuanto actualizáis un plugin o ponéis un slider en vuestra web. Hay que estar alerta con cada cambio en el diseño de la web.

Scroll horizontal - Rafafields

Entendiendo el scroll horizontal

Se produce scroll horizontal cuando alguno de los elementos de nuestra web está desbordando el wrap. ¿Qué es el wrap? Cada framework, CMS y diseñador lo llama de una forma diferente. Para Bootstrap es .container, para WordPress es .site-content, y así podríamos seguir… No importa el nombre, solo tenemos que entender el concepto de un <div> cuyo ancho se adapta a la ventana del dispositivo que ejecuta la web. ¿Podemos crear y configurar con CSS nuestro propio wrap? Sí, pero no es recomendable.

¿Por qué usar .container?

De entre todos los frameworks de CSS el más usado con diferencia es Bootstrap, por nada en especial, supongo que porque fue de los primeros. Igual que WordPress se ha convertido en el CMS de referencia para construtir y gestionar todo tipo de webs, Bootstrap es el framework que articula la mayoría de plugins. Lo que quiere decir, que si usamos Bootstrap desde el principio, hay más probabilidades de que las nuevas mejoras encajen como en un puzzle.

¿Cómo detectar elementos desbordados del wrap?

 

¡Oh, Un scroll horizontal salvaje apareció!
¡Oh, Un scroll horizontal salvaje apareció!
Scroll horizontal - Rafafields
Pulsamos click derecho > inspeccionar elemento para ver por secciones el código fuente

 

Las webs dinámicas en php o los CMS se estructuran en bloques separados que luego se unen como piezas al reproducir la web. Si el código está limpio, podremos ver más fácilmente estos bloques en el código, y así podremos revisarlos uno a uno para identificar el error. Muchas veces, será evidente, ya que al desplazar el scroll hacia la derecha, solo uno de los elementos llegará hasta el borde de la ventana; otras veces será más complicado, y no podremos distinguir dónde está el error. De esta inspección no se libra nadie, ni los más experimentados, ya que muchas veces hay que enfrentarse a webs ajenas o mal documentadas.

 

scroll-h-4

 

Una vez dentro de la ventana, si estamos usando chrome, debajo del logotipo arriba a la izquierda, hay un botón scroll-h-5. Púlsalo para que la flecha del ratón analice las dimensiones de los elementos por encima de los que pasas. Verás que dichos elementos tienen en chrome 3 colores diferentes, principalmente 2: el naranja es el margin, el verde el padding. Son conceptos muy básicos de diseño web, que, a su vez, están basados en el diseño editorial.

 

¿El diseño editorial?

Aunque nunca se debe pretender que una web sea una revista (ya que una revista no se diseña para que se vea en 7 tamaños de pantalla distintos), no podemos olvidar que las bases del HTML son las mismas que las de una hoja de texto. El concepto de flow, de display y de position, que son los que hacen posible una estructura funcional, son herederos del diseño editorial. También es el caso de margin (margen) y padding (margen interno).

Si entendemos que los elementos <div>, <article>, <section>, <footer> o <header> como contenedores del resto de elementos, la lógica nos dice que el wrap se encuentra pocas lineas arriba o abajo de dicho contenedor.

 

Un width forzado
Un width forzado

Scroll horizontal - Rafafields

Si inspeccionamos la web de arriba abajo, cuando llegamos al footer con ID #superfooter, vemos que sus dimensiones están llegando hasta el final del desbordamiento del scroll. Si echamos un ojo a la columna de la derecha donde aparecen las propiedades de CSS que están afectando al elemento, vemos que tiene una propiedad de width:105%. Clicamos en la casilla para comentar esa línea de código y el footer recupera su tamaño original y se adapta al wrap.

Cuando encontremos en elemento problemático, debemos asegurarnos de que es él y no alguno que éste contenga (por ejemplo, podemos ver el footer desbordado gracias a que cierto div en su interior tiene un ancho fijo en pixeles). Cuando estemos seguros de cual es, debemos ver el CSS que lo afecta, porque seguro que tiene toda la culpa. Probad qué pasa cuando al clicar en los checkbox se comentan las líneas de código y dejan de afectar al elemento. Generalmente, las propiedades CSS más agresivas para el responsive son:

  • width: establece un ancho fijo indiscriminado. Si tiene un valor de 600px, por ejemplo, al verlo en movil generará scroll horizontal.
  • margin, margin-right, margin-left: esta propiedad empuja al resto de elementos, y el espacio que genera ocupa un lugar que, en algunas ocasiones, puede desbordar el wrap.
  • padding: como genera espacio interior, un mismo objeto con un ancho responsive usando width, o max-width no debería tener problemas, pero si el ancho no está limitado, el objeto empieza a “engordar” sin control y puede generar este tipo de errores.

Para este ejemplo he colocado ese width yo mismo, para forzar el scroll horizontal usando un ancho fijo de más del 5% de su ancho por defecto. El diseño de la web está preparado para que todos sus contenedores superiores, como header, content o footer, tengan el ancho por defecto 100%, de esta manera se adaptan a la pantalla. Por eso hay que tener cuidado, por ejemplo, con plugins que inserten HTML directamente en la parte visible de la web. Por ejemplo, un simple plugin de aviso de cookies, si está mal configurado puede generar este tipo de error, ya que se inserta como un elemento más con estilo propio que puede no estar preparado para fluir con nuestra plantilla.

 

No tapar un parche con otro

Muchas veces, por falta de tiempo, por ejemplo, la concentración no nos llega para encontrar el dichoso infiltrado que está afectado al scroll horizontal. A veces no es tan sencillo como cambiar el valor de la propiedad CSS, ya que podemos vernos en un caso en que nuestra hoja de estilos tenga menos prioridad que la que está afectando. Esto suele pasar con los plugins, y no es nada aconsejable editar los archivos de un plugin sabiendo que la próxima actualización los borrará. Si esto os pasa, por ejemplo, en una web que yá está online recibiendo muchas visitas y tenéis que actuar rápido, un truco visual temporal es usar la propiedad CSS overflow-x: hidden !important; en el body de vuestra web, de esta forma se desactiva la posibilidad de que se genere el scroll.

Si estás pensando que YA PODRÍAS HABER EMPEZADO POR AHÍ, MAJO, estáis equivocados, esto solo es una solución de emergencia. De permanecer activo, podría desbordarse el contenido y nosotros no tendríamos ni siquiera un indicador de que está fallando hasta que no nos fijemos en ello. Para más info, echad un ojo a la propiedad overflow, porque el remedio puede ser peor que la enfermedad

Facebook Comments