Hola @pabloweb88, @inmasevilla tiene razón, el 100vw es el culpable de la barra de desplazamiento. Cuando se usa 100vw, se refiere al 100% del ancho del viewport incluyendo la barra de desplazamiento vertical si esta existe. Esto hace que el elemento sea ligeramente más ancho que el espacio visible.
La solución más limpia en custom.css es forzar que el body (o el html y body) no permita desbordamiento horizontal y, para el texto, usar flexbox para el centrado y la función clamp() de CSS para el tamaño de fuente responsivo. Esto te dará un control mucho mejor sin necesidad de media queries complicadas.
Aquí tienes el código modificado que puedes añadir a themes/classic/assets/css/custom.css:
/* Solución para evitar la barra de desplazamiento horizontal con 100vw */
html, body {
overflow-x: hidden; /* Esto oculta cualquier desbordamiento horizontal */
}
#hero-banner {
width: 100vw; /* Ahora 100vw no causará scroll horizontal */
height: 400px;
background-image: url('../img/hero-bg.jpg');
background-size: cover;
background-position: center;
Explicación de los cambios:
html, body { overflow-x: hidden; }: Esta es la clave. Le dice al navegador que no muestre barras de desplazamiento horizontales si el contenido se desborda en el eje X. Ahora tu width: 100vw funcionará como esperas sin crear el scroll.#hero-banner { display: flex; justify-content: center; align-items: center; }: En lugar de position: absolute y transform, hemos aplicado display: flex al contenedor #hero-banner. Esto convierte a .banner-text en un elemento flex, y justify-content: center junto con align-items: center lo centrarán perfectamente tanto horizontal como verticalmente dentro del banner.#hero-banner .banner-text { font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); }: clamp() es una función CSS muy útil para fuentes fluidas. Define un tamaño mínimo (2.5rem), un tamaño preferido (que escala con el ancho del viewport 5vw + 1rem), y un tamaño máximo (4.5rem). Esto asegura que tu texto sea responsivo, pero que nunca sea ni demasiado pequeño ni demasiado grande. He añadido también max-width: 90%; al texto para que no se extienda por completo en pantallas muy grandes, mejorando la legibilidad.