Hola @lorenadev12,
@samuel_es tiene razón, el problema es que 100vw incluye el ancho de la barra de desplazamiento vertical del navegador, lo que empuja el contenido y crea esa barra de desplazamiento horizontal no deseada. En PrestaShop 1.7.3.4, la estructura del tema Classic a menudo tiene contenedores con max-width y padding, y cuando un elemento intenta salirse con 100vw, se produce este conflicto.
La forma más limpia de manejar esto puramente con CSS y sin modificar los archivos .tpl del tema Classic es asegurar que el elemento raíz html no permita el desplazamiento horizontal. Esto evitará que la barra de desplazamiento horizontal aparezca.
Aquí tienes el ajuste que deberías añadir a tu themes/classic/assets/css/custom.css:
html {
overflow-x: hidden;
}
.hero-banner-container {
/* Mantén tus estilos existentes, son correctos para el ancho */
width: 100vw;
position: relative;
margin-left: calc(50% - 50vw);
background-color: #f0f0f0;
min-height: 300px;
Explicación de los cambios:
html { overflow-x: hidden; }: Esta es la clave. Le indica al navegador que cualquier contenido que se desborde horizontalmente del elemento html debe ocultarse, eliminando así la barra de desplazamiento horizontal no deseada. Es generalmente más seguro aplicarlo a html que a body para evitar posibles conflictos con otros estilos del tema.- Tus estilos para
.hero-banner-container y .hero-text son perfectamente válidos para lograr el ancho completo del banner y el texto centrado y adaptable, una vez que el problema del scroll se ha resuelto. Asegúrate de que este CSS esté en tu archivo custom.css y, como siempre, limpia la caché de PrestaShop (en Parámetros Avanzados > Rendimiento) y la caché de tu navegador para ver los cambios.