Es el error clásico: abres tu web en el móvil y notas que puedes deslizar la pantalla hacia la derecha, dejando un espacio en blanco innecesario. Este «bug» visual suele romper la experiencia de usuario y ocurre porque un elemento es más ancho que el contenedor padre.
El Culpable: El Modelo de Caja (Box Model)
La mayorÃa de las veces, esto sucede porque añadimos padding o borders a un elemento que ya tiene un width: 100%. Por defecto, CSS suma esos valores, haciendo que el elemento mida más del 100%.
La Solución Rápida: box-sizing
La forma más eficiente de evitar que esto ocurra de forma global es aplicar la propiedad box-sizing: border-box;. Esto obliga al navegador a incluir el padding y el borde dentro del ancho total del elemento.
Añade esto al inicio de tu CSS:
*, *::before, *::after {
box-sizing: border-box;
}El «Truco Pro» para encontrar al infractor
Si después de aplicar lo anterior el scroll lateral persiste, es que tienes un elemento hijo «rebelde» (como una imagen grande o un texto sin saltos). Usa este snippet temporalmente para localizarlo visualmente:
CSS
/* Esto dibujará un borde rojo alrededor de cada elemento de tu web */
* {
outline: 1px solid red !important;
}
Al recargar, busca qué caja roja se sale de los lÃmites de la pantalla. Una vez lo encuentres, asegúrate de que ese elemento tenga un max-width: 100%;.
0 comentarios 
Deja una respuesta