Buenas a todos! Como puedo hacer que mi sitio no tenga el scroll horizontal? tengo entendido que si le doy un width de 100% al body no de...

Leonardo Esteban Omeara Garzon

Pregunta

student•hace 4 años

Buenas a todos!

Como puedo hacer que mi sitio no tenga el scroll horizontal? tengo entendido que si le doy un width de 100% al body no deberia ocurrir aunque no estoy seguro jajaja.

y de paso si alguien sabe como puedo tomar un pantallazo completo de la vista de mi pagina para celulares, para tablet y para desktop?

Muchas gracias

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./tablet.css" media="screen and (min-width:600px)">
    <link rel="stylesheet" href="./desktop.css" media="screen and (min-width:800px)">
    <title>Hamburguesas</title>
</head>
<body>
    <header>
        <h2 class="main-title">Hamburguesas</h2>
        <ul class="nav-bar">
            <li class="nav-item"><a href=""><img class="img-icon" src="./img/iconos/e-commerce/181563-e-commerce/png/cash-machine.png" alt=""></a></li>
            <li class="nav-item"><a href=""><img class="img-icon" src="img/iconos/e-commerce/181563-e-commerce/png/currency.png" alt=""></a></li>
            <li class="nav-item"><a href=""><img class="img-icon" src="img/iconos/e-commerce/181563-e-commerce/png/refund.png" alt=""></a></li>
            <li class="nav-item"><a href=""><img class="img-icon" src="img/iconos/e-commerce/181563-e-commerce/png/delivery-cart.png" alt=""></a></li>
        </ul>
    </header>
    <main class="container">
        <section class="info">
            <figure class="main-img-container">
                <img class="main-img" src="img/main.png" alt="">
            </figure>
            <div class="text-info">
                <h3>Bienvenido a Hamburguesas!</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero fuga quibusdam temporibus possimus. Odio, mollitia sint! Neque rerum accusamus, qui, officiis, similique blanditiis alias id quisquam laudantium mollitia repellat minima!
            </div>
        </section>
        <section class="products">
            <h3>Productos</h3>
            <div class="cards-container">
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
                <div class="card">
                    <figure class="card-img-container">
                        <img src="./img/hamburguers/type1.png" alt="">
                    </figure>
                    <div class="card-info">
                        <h4 class="name">BigMac</h4>
                        <h4 class="price">$10000</h4>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>Designed by Leo</p>
        <div class="social-net">
            <img class="icon" src="./img/iconos/social/733536-social/png/045-facebook.png" alt="">
            <img class="icon" src="./img/iconos/social/733536-social/png/039-github.png" alt="">
            <img class="icon" src="./img/iconos/social/733536-social/png/031-linkedin.png" alt="">
        </div>
    </footer>
</body>
</html>

CSS

:root{
    --mainColor:#283618;
    --secondColor:#fefae0 ;
    --thirdColor:#264653;
    --hamburguer-size:20rem;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding:0;
}


@font-face {
    font-family: LemonMilk;
    src: url('fuentes/lemon_milk/LEMONMILK-Regular.otf');
}

@font-face {
    font-family: feast;
    src:url('fuentes/friday13/Friday13SH.ttf');
}

html{
    font-size: 62.5%;
}

body{
    font-size: 1.6rem;
    font-family: LemonMilk;
    background-color:var(--secondColor);
    width: 100vw;
}


header{
    display: flex;
    font-size: 2rem;
    height: auto;
    width: 100vw;
    flex-direction: column;
    align-items: center;
    background-color: var(--mainColor);
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-bar{
    list-style: none;
    display: flex;
    width: 17rem;
    justify-content: space-evenly;
    margin-bottom: 1rem;
}

.img-icon{
    width: 3.2rem;
}

.main-title{
    margin: 2rem 0;
    color: var(--secondColor);
}

.main-img{
    width: 15rem;
    margin: 1.4rem 0;
}

.info{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-info{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-info h3{
    margin-bottom: 1.5rem;
    color: var(--mainColor);
}

.text-info p{
    font-size: 1.5rem;
    padding: 2.4rem;
    padding-top: 0.3rem;
    text-align: center;
}


.products{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.products h3{
    color: var(--mainColor);
    margin-bottom: 1.5rem;
}

.card{
    border-radius: 2.2rem;
    border: 0.2rem solid var(--mainColor);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.card-container{
    margin-top:2.5rem;
}

.card-img-container img{
    width: var(--hamburguer-size);
}

.card-info{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    align-items: center;
}

.card-info .name{
    font-size: 90%;
    color: var(--mainColor);
}

.card-info .price{
    font-family: feast;
}

footer{
    background-color: var(--thirdColor);
    width: 100vw;
    height: 10rem;
    display: flex;
    color: var(--secondColor);
    align-items: center;
    
}

footer p{
    width: 100vw;
    text-align: center;
}

.icon{
    width: 3rem;
}

.social-net{
    right: 5%;
    position: absolute;
    display: flex;
    justify-content: space-evenly;
    width: 20%;
}

John Cardenas

student•hace 4 años

Hola Leonardo

Debes buscar bien que elemento es el que se está saliendo del viewport, quitar el scroll horizontal probablemente no lo solucionará. Puede ser algo que no se ve, como por ejemplo un margin o un padding.

En cuanto a tomar captura de pantalla, puedes hacerlo desde el mismo inspector de elementos, en estas opciones:

Se encuentran en el menú de la esquina superior derecha del inspector de elementos en modo responsive. Simplemente seleccionas el tamaño o ancho y tomas la captura de esa parte o de todo el sitio.

Leonardo Esteban Omeara Garzon

student•hace 4 años

Gracias por la aplicacion!

Leonardo Esteban Omeara Garzon

student•hace 4 años

Y existe alguna forma de hacerlo con el documento completo? pasa que reviso los contenedores pero ninguno supera el 100vw y no se cual es el contenedor que se esta desbordando :(

Leonardo de los angeles Espinoza Hernandez

student•hace 4 años

Hola @leonardoOmeara

Para esconder el scroll horizontal solo basta con agregar esto al contenedor del elemento que se desborda

	overflow: hidden;

Solo que debes tener mucho cuidado y debes corroborar que todo tu contenido este dentro del viewport de los dispositivos.

Para tomar screen de distintos dispositivos te recomiendo una aplicación de escritorio que se llama

Responsively

que te ayuda a ver tu website en diferentes dispositivos

Puedes verlo en este enlace https://responsively.app/

Saludos!

Buenas a todos! Como puedo hacer que mi sitio no tenga el scroll horizontal? tengo entendido que si le doy un width de 100% al body no de...

Curso de HTML y CSS [Empieza Gratis]

Curso de HTML y CSS [Empieza Gratis]