0

Venía bien diseñando el index, y de repente me apareció el scroll horizontal en el navegador. Vamos, tuve que borrar casi toda la página para intentar solucionarlo. Y no hay caso. De seguro es una pavada, pero la verdad que no sé.

<div class="carrousel__container">
    <!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>

<div class="carrousel__container">
    <!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>

<div class="carrousel__container">
    <!-- <img src="media/mdatacenter.jpg" alt="" class="carrousel__image1"> -->
</div>

EL CSS:

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: "Exo 2";
}

body{
    height: 100vh;
    width: 100vw;
  
}

.carrousel__container{
    width: 90%;
    height: 40%;
    background-color: black;
    display: block;
    margin-top: 1px;

}

No pongo lo demás, puesto que elimine todos los elementos css. ¡La imagen dentro del div (carrousel container) está comentada!

Cuando los elementos son varios y sobrepasan la altura de la pantalla, está bien, se crea el scroll vertical. Pero no entiendo ¿por qué el horizontal?
Se me queda un pedazo de pantalla en horizontal que no sé de dónde sale. Ya borré márgenes, saqué los padding, busqué lo del colapso de márgenes... No sé qué sucede.

Aclaro que hay conceptos fundamentales que no conozco de css. No sé si el body debe ser configurado de esa manera o no!

Podría solucionarlo con un overflow : hidden, pero no es la solución que busco, puesto que quisiera que los números me den correctamente, sino ya pasar al responsive va a ser un lío.

6
  • A simple vista a tu CSS todo está muy bien. Pero que tal si intentas con width: calc(100% - 1rem) a tu carrousel__container ? De otra forma, ve si en tu HTML no haya estilos en línea y otra hoja de estilos enlazado Commented el 4 mar. a las 1:40
  • Click derecho en tu página y pones inspeccionar, el navegador si divide en dos. En un lado queda tu pagina y en el otro el código. Si posicionas el mouse sobre el código en la pagina si visualiza el elemento correspondiente marcando además los margin y padding. De esta manera encuentras el elemento que está generando el scroll
    – Yussef
    Commented el 4 mar. a las 7:08
  • Hola gracias muchachachos!! Lo hice!! Tanto el margin como el padding esta todo seteado en 0. No hay estilos en linea en el html. Y todo el codigo demas restante esta comentado, para tratar de verificar el problema. En el inspector me marca un body de 600px y el elemento carrousel__container tambien con 600px. Pero el scroll lateral se sigue visualizando. Habra alguna configuracion que este pasandome por alto ? Commented el 4 mar. a las 15:46
  • La altura tiene algo que ver ? Hablo desde mi ignorancia en css!! Si los elementos no sobresalen de la altura del viewport , el ancho se muestra normal y perfecto. No hay desbordamiento. El mismo ocurre cuando hay mas elementos debajo. Lo logico seria el scroll vertical. Pero yo tengo ambos!! Commented el 4 mar. a las 15:48
  • Probe en chrome pensando que era algo de cache o el navegador , pero se visualiza igual. Asi que evidentemente hay algo que me estoy pasando por alto. Commented el 4 mar. a las 15:52

2 respuestas 2

0

A ver: lo solucioné seteando el ancho del body{width : 100%} usando porcentaje en vez de usar viewport width. Sinceramente el problema está porque no asimilo bien todavía estos conceptos.

Pero ese pedazo de pantalla que se mueve en horizontal, es el ancho del scroll vertical que muestra cuando hay más elementos debajo.

Estuve 1 día entero tratando de solucionar esto.
Me da vergüenza jajaja

0

Tuve un caso similar y lo pude solucionar con los siguiente:

overflow-x: hidden;

También puedes usar el overflow-y dependiendo de la ubicación de la barra.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.