Ok, so during the last weeks I've been trying to understand how html and CSS work, right now I'm struggling trying to make a grid layout. I'm trying to make my web responsive but when I work with percentages the percentages don't seem to apply correctly. For example there's an orange rectangle that's supposed to fit all the width of the screen, but with my code when the screen is pretty small it isn't large enough.
Here's the HTML and CSS (there are different settings depending on the media):
@media screen and (max-width:480px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 70% 30%;
grid-template-areas: "imatge" "descripcio";
}
.imatge {
background-color: mediumspringgreen;
display: inline-block;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: inline-block;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
}
@media screen and (min-width:481px) {
body {
background-color: mediumspringgreen;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 30% 6% 60% 4%;
grid-template-areas: "header" "nav" "main" "footer";
width: 100%;
height: 100%;
}
header img {
display: block;
align-self: center;
justify-self: center;
max-height: 5%;
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.rectangle {
width: 100%;
height: 4%;
background: gold;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
.button1 {
background-color: green;
color: gold;
border: 3px solid mediumspringgreen;
border-radius: 12px;
display: inline-block;
cursor: pointer;
}
nav {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
main {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-template-areas: "imatge descripcio";
}
.imatge {
background-color: mediumspringgreen;
}
.descripcio {
background: gold;
justify-content: center;
align-items: center;
display: flex;
position: absolute;
width: 100%;
height: 50%;
}
footer {
display: inline-block;
width: 100%;
align-items: center;
justify-content: center;
}
span {
color: gold;
}
}<header style="width: 100%;">
<p style="text-align:center;">
<a href="pàgina%20home.html">
<img src="https://i.imgur.com/BSHMhUe.png" alt="logo">
</a>
</p>
</header>
<nav style="width: 100%;">
<p class="rectangle">
<button class="button1" onclick="location.href='pàgina%20productes.html'">Productes</button>
<span> </span>
<button class="button1" onclick="location.href='pàgina%20contacte.html'">Contacte</button>
</p>
</nav>
<main>
<section style="text-align:center;" class="Imatge">
<h2 style="font-size:150%;">Producte Destacat</h2>
<a href="pàgina%20producte.html">
<p style="text-align:center;">
<img src="https://clubtech.es/wp-content/uploads/2018/12/playstation_4_console_controller_ps4_92842_3840x2160.jpg" alt="Producte destacat" style="width:40%">
</p>
</a>
</section>
<article style="text-align:center;" class="Descripcio">
<p></p>Description</article>
</main>
<footer>
<p style="text-align:center;">
<a href="pàgina%20avís%20legal.html">Avís Legal-Privadesa-Termes d'ús</a>
</p>
<p style="text-align:center; font-size:75%;">
<a href="https://www.freepik.com/vectors/logo">Logo vector created by freepik - www.freepik.com</a>
</p>
</footer>Right now my problems are that elements don't change their size proportionally to the resolutions of the screen, they decrease or increase their size at different speeds. Also, sometimes elements from a grid cell overlap with elements of another cell, like if I leave the header img at 100% it overlaps with the rest of the elements in the html.
JSFiddle: https://jsfiddle.net/915seaLc/