1

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...

4
  • Necesitamos el HTML y tus reglas css para comprobar lo que ocurre
    – BetaM
    el 1 ago. 2020 a las 3:41
  • Hola @Joel, falta que agregues código HTML y reglas CSS para completar tu respuesta, ya que nos permitiría visualizar dónde está el problema que estás presentando. Sin embargo, te adelanto dos cosas: 1) Para que te funcione, al menos, en un Smartphone o Tablet, debes utilizar la etiqueta <meta name="viewport" content="width=device-width" />; 2) La última Media Queries está sobrescribiendo la primera. el 1 ago. 2020 a las 3:51
  • Vale, muchas gracias, ya lo añadi. Si he insertado el viewport pero parece seguir igual. el 1 ago. 2020 a las 12:36
  • No estoy seguro, pero creo que si inicias #landing_portada con un height por ejemplo, luego en el mediaquery deberías añadir !important para que se tenga en cuenta. Otra opción es no iniciar con height y ponerles los height solo en los mediaquery, con el resto de opciones igual.
    – track3r
    el 1 ago. 2020 a las 13:08

2 respuestas 2

1

Quita los ; al final de las media queries, no se necesitan, y estan bloqueando las definiciones

@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%;
    }
}

Ademas fijate en el orden de las declaraciones, para evitar que se sobrepongan de manera inesperada. Las declaraciones posteriores sobreescriben a las anteriores. Por ejemplo una pantalla >= 801px

@media only screen and (min-width: 801px){} /* 1, sobreescrito por 3 */
@media only screen and (max-width: 601px){} /* 2, descartado */
@media only screen and (min-width: 500px){} /* 3, sobreescrbe a 1 */

En una pantalla > 550px

@media only screen and (min-width: 801px){} /* 1, descartado */
@media only screen and (max-width: 601px){} /* 2 sobreescrito por 3 */
@media only screen and (min-width: 500px){} /* 3 sobreescribe a 2 */

Por lo que cualquier definicion repetida sera sobreescrita (min-width: 801px siempre sera sobreescrita en tu caso). El orden de precedencia siguiente seria menos obstructivo:

@media only screen and (min-width: 500px){} /* 1 */
@media only screen and (min-width: 801px){} /* 2, sobreescribe a 1 solo si es mayor a 800px */
0

Tengo, mas o menos, el mismo problema. Pero en mi caso cuando declaro el min-widht, este mismo no se resalta en el vs code, es como si fuera que no lo reconoce y se queda simplemente tipeado en color gris. Lo solucione yendo a developer Mozilla y copié directamente la sintaxis del media queries de ahí y en ese caso si me reconoció el min-widht. Dejo esta respuesta por si a alguien le pasa igual pues que sepan que de esa manera se soluciona, al menos eventualmente. No se a que se deberá ese error ya que el Vs Code no me detecta ningún error de sintaxis ni nada.

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.