Ayuda problema CSS

Phoenix

Miembro
27 Dic 2018
15
3
Como podéis ver en las imágenes al ampliar o reducir la página en los mediaquerys para tamaño tablet y pantalla grande se crean unos espacios arriba de los div de texto e imágenes, no se como solucionarlo y llevo ya un rato, os dejo el código más abajo.
947
948


Código por si no queréis abrir el zip donde están a demás las imágenes:

HTML:
HTML:
<!DOCTYPE html>
<html lang="cat">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Disseny Responsiu</title>
    <link rel="stylesheet" href="exercici2.css" />

    
    <link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet" />


  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .container {
            font-family: "Righteous", cursive;
            margin: 20px auto;
            width: 90%;
        }

        .menu_item {
            padding: 0.5em;
            display: none;
        }

      

    </style>

</head>

<body>
    <div class="container">
        <header>
            <h1>Responsiu</h1>
            <nav>
                <div class="icon"><i class="fa fa-bars"></i></div>
                <div class="menu_item firstmenu">INICI</div>
                <div class="menu_item">PERSONATGES</div>
                <div class="menu_item">CREADOR</div>
            </nav>
        </header>
        <main>
            <section class="txt1">
                <div>
                    <h3>PERSONATGES DELS VIDEOJOCS</h3>
                    <h1>DISSENY RESPONSIU</h1>
                </div>
                <div>
                    <p>
                        Phasellus sit amet
                        massa convallis, facilisis felis eget, imperdiet ex. Nullam hendrerit varius libero, in porttitor sapien
                        semper vel. Praesent auctor lacus nec blandit tincidunt. Cras ac tempor leo.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo et felis non mattis. In hac
                        habitasse platea dictumst. Quisque pretium augue nisl, nec vulputate magna luctus eu. Phasellus sit amet
                        massa convallis, facilisis felis eget, imperdiet ex. Nullam hendrerit varius libero, in porttitor sapien
                        semper vel. Praesent auctor lacus nec blandit tincidunt. Cras ac tempor leo.
                    </p>
                    <p>Phasellus sit amet
                        massa convallis, facilisis felis eget, imperdiet ex. Nullam hendrerit varius libero, in porttitor sapien
                        semper vel. Praesent auctor lacus nec blandit tincidunt. Cras ac tempor leo.
                    </p>
                </div>
            </section>
            <section class="imgs1">
                <img src="./imatges/imatge1.png" /> <img src="./imatges/imatge2.png" />
                <img src="./imatges/imatge3.jpg" /> <img src="./imatges/imatge4.jpg" />
                <img src="./imatges/imatge5.png" /> <img src="./imatges/imatge6.png" />
                <img src="./imatges/imatge7.png" /> <img id="imgbye" src="./imatges/imatge8.png" />
                <img src="./imatges/imatge9.png" />
            </section>
        </main>
        <section class="bottomtxt">
            <h2>NOVETATS</h2>
            <article>
                <h4>15 de novembre</h4>
                    <h3>Novetat 1</h3>
                    <p>
                        Accusantium consectetur, numquam ratione sed ut ipsa earum
                        consequatur sunt quae officiis facere tempora nobis pariatur
                        quibusdam non, cum harum. Expedita, doloribus!
                    </p>
            </article>
            <article>
                <h4>30 de novembre</h4>
                    <h3>Novetat 2</h3>
                    <p>
                        Accusantium consectetur, numquam ratione sed ut ipsa earum
                        consequatur sunt quae officiis facere tempora nobis pariatur
                        quibusdam non, cum harum. Expedita, doloribus!
                    </p>
            </article>
            <article>
                <h4>6 de desembre</h4>
                <h3>Novetat 3</h3>
                <p>
                    Accusantium consectetur, numquam ratione sed ut ipsa earum
                    consequatur sunt quae officiis facere tempora nobis pariatur
                    quibusdam non, cum harum. Expedita, doloribus!
                </p>
            </article>
        </section>
    </div>
    <script>
        //Funció encarregada de mostrar el menú
        $(function() {
            //Captura del event par mostrar o ocultar
            $(".icon").click(function() {
                $(".menu_item").toggle();
            });
            $(window).resize(function() {
                var anchura = $(this).width();
                if (anchura > 576) {
                    $(".menu_item").show();
                }
            });
        });

    </script>
</body>

</html>

CSS:

CSS:
*{
    box-sizing: border-box;
    z-index: 0;
}
nav{
    z-index: 500;
    background: whitesmoke;
    position: absolute;
    top: 8%;
    right: 5.8%;
    
}
h1,h2,h3{
    color: green;
    display: inline-block;
}
.icon{
    color: green;
    float: right;
    position: absolute;
    top: 8%;
    right: 7%;
}
.menu_item{
    color: green;
}
main h3{
    color: white;
}
main{
    background-color: gray;
}
section{
    padding-left: 4%;
}

main p{
    color: white;
}

@media screen and (max-width: 570px) {
    #imgbye{
        display: none;
    }
    img{
        width:23%;
    }

}
@media screen and (min-width: 571px) {
    img{
        width: 45%;
        height: auto;
    }
    .txt1{
        display: inline-block;
        width: 45%;
        /* padding: 0%; */
    }
    
    .imgs1{
        display: inline-block;
        width: 37%;

        /* margin-top: auto; */
    }
    .firstmenu{
        margin-top: 3%;
    }
    article{
        display: inline-block;
        width: 20%;
    }
    h2{
        float: left;
        margin-right: 10%;
    }
    .bottomtxt{
        padding: 0%;
    }
    #imgbye{
        display: none;
    }
}
@media screen and (min-width: 1000px) {
    body{
        background-color: brown;
    }
    .icon {
        display: none;
    }
    .menu_item{
       display: inline-block;
    }
    nav{
        float: right;
        display: inline-block;
    }
}
 

Phoenix

Miembro
27 Dic 2018
15
3
Lo he solucionado haciendo flotar los div que contienen el texto y las imágenes y añadiendo en el CSS del contenedor: "
CSS:
display: flow-root;
" para solucionar que los objetos flotantes no ocupen un espacio verticalmente por lo que el fondo se deforma totalmente. Si descubro si puedo cerrar el tema lo hago.
 
Arriba Pie