He tenido algunos problemas con mis Media Queries.
He intentado de todo pero parece que no son reconocidas y no generan ningun cambio a la hora de cambiar el ancho de la ventana, la verdad no se si alguien me podria decir que estoy haciendo mal, aqui añado el HTML y el CSS para que se pueda ver.
Solo puedo decir que algo que he podido notar es que parece que solo e primer media querie que pongo es el que afecta el diseño sin embargo los otros parecen ser ignorados.
Inicio de CSS
* {
margin: 0;
font-family: 'Sora', sans-serif;
}
#grid-wrapper {
display: grid;
}
/*NAV PRINCIPAL*/
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 3;
}
#nav_principal {
display: flex;
list-style: none;
padding: 20px 20px;
margin: 10px;
}
#nav_principal li {
color: white;
display: inline-block;
padding: 0 25px;
cursor: pointer;
}
#contacto {
position: fixed;
right: 15px;
}
/*COLORES*/
.azul {
background: rgb(36,11,235);
background: linear-gradient(0deg, rgba(36,11,235,1) 9%, rgba(22,37,199,1) 44%, rgba(11,45,229,1) 68%);
}
/*LANDING PAGE*/
#landing_portada {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 90vh;
margin-top: 80px;
background: url("https://graphberry-imgs.imgix.net/isometric-technology-illustration-231.jpg?auto=compress,format&q=80&w=800") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.giant-title {
color: white;
width: 70%;
font-size: 3rem;
margin: 25px;
}
#descripcion_landing {
width: 60%;
text-align: justify;
color: white;
font-size: 1.2em;
margin: 25px;
}
#llamada_accion {
padding: 25px;
align-items: flex-end;
}
/*MEDIA QUERIES*/
@media only screen and (min-width: 801px) {
#landing_portada {
height: 110vh;
}
#description-landing {
font-size: 1.7em;
background-color: yellow;
}
};
@media only screen and (max-width: 601px){
#landing_portada {
height: 10vh;
}
#description-landing {
font-size: 1.6em;
background-color: yellow;
}
};
@media only screen and (min-width: 500px) {
#nav_principal {
font-size: 0.9em;
padding: 25px 0;
}
#contacto {
position: absolute;
right: 10px;
}
#landing_portada {
height: 120vh;
}
.giant-title {
width: 70%;
}
#descripcion_landing {
width: 80%;
}
};
Inicio de HTML
<!DOCTYPE html>
<html>
<head>
<title>XCalculadora-Calculadora del Futuro</title>
<link rel="stylesheet" href="./style.css">
<meta content="width=device-width, initial-scale=1" name="viewport" />
</head>
<body>
//codigo
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300&display=swap" rel="stylesheet">
</body>
</html>
Cualquier informacion que pueda aportar se las dare...
<meta name="viewport" content="width=device-width" />
; 2) La última Media Queries está sobrescribiendo la primera.