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.
Código por si no queréis abrir el zip donde están a demás las imágenes:
HTML:
CSS:
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;
}
}