estoy haciendo un proyecto para mis estudios y al momento de aplicar las media queries no funcionan como deberían. Al usar max-width: 767px y pasar esa resolución con el debugger las queries no se aplican. Por el contrario, al usar min-width: 767px las queries se aplican en todo momento independientemente del ancho del dispositivo. Adjunto el código para que puedan ayudarme.
Anteriormente he hecho otros proyectos usando esta misma sentencia de la misma forma y siempre funciona, no entiendo por qué esta vez no.
Estoy usando Google Chrome y sus herramientas de desarrollador para debuggear.
Muchas gracias. Saludos cordiales
Edit: Actualizado
body {
background-color: bisque;
}
#navbar {
display: flex;
color: crimson;
}
header {
position: sticky;
top: 1px;
grid-area: nav;
display: flex;
flex-direction: row;
background-color: burlywood;
justify-content: space-between;
}
.Nos {
font-family: "Rubik", sans-serif;
}
h1 {
font-family: "Rubik", sans-serif;
color: chocolate;
display: flex;
justify-content: center;
}
.instrucciones {
font-style: italic;
font-weight: bold;
text-align: center;
}
#introduccion {
color: red;
width: 500px;
height: 300px;
padding: 10px;
font-family: "Rubik", sans-serif;
}
#cardsVerMas {
display: grid;
}
body h2 {
color: crimson;
}
#logo {
width: 185px;
height: 50px;
}
header ul {
align-items: center;
font-family: "Rubik", sans-serif;
}
header ul li {
text-decoration: none;
list-style: none;
align-items: center;
margin: 10px;
}
header ul li a {
text-decoration: none;
color: darkmagenta;
}
footer {
text-align: center;
font-family: "Rubik", sans-serif;
grid-area: footer;
}
#datosPersonalesConsulta {
font-family: "Rubik", sans-serif;
}
#tablaPrincipal {
font-family: "Rubik", sans-serif;
}
#tablaSecundaria {
font-family: "Rubik", sans-serif;
}
#tablaDeValores {
font-family: "Rubik", sans-serif;
}
table {
font-family: "Rubik", sans-serif;
}
table td {
padding: 10px;
}
table ol {
list-style: none;
padding: 10px;
border: 10px;
}
#fotoIzquierda {
background-color: #ccc;
width: 700px;
}
#fotoIzquierda p {
font-family: "Rubik", sans-serif;
padding: 10px;
width: 500px;
height: auto;
}
#subMenu {
list-style: none;
margin: 5px;
font-size: 2rem;
}
#subMenu li {
display: inline-block;
width: 70px;
position: relative;
font-size: 14px;
margin-left: 10px;
padding: 10px;
}
#subMenu li :hover {
background-color: darkred;
padding: 10px;
}
#subMenu ul {
position: absolute;
display: none;
}
#subMenu ul li {
display: block;
}
#subMenu li:hover ul {
display: block;
background-color: indigo;
margin-top: 5px;
}
#formularioMailing {
display: flex;
flex-direction: column;
align-items: center;
}
.grid-area {
display: grid;
grid-template-areas: "nav nav""titulo titulo""nosotros video""form form""footer footer";
grid-template-columns: 50% 50%;
grid-template-rows: 70px 70px 1fr 50% 70px;
justify-items: center;
}
.grid-titulo {
grid-area: titulo;
}
#recetaDeLaSemana {
grid-area: video;
}
.grid-nosotros {
grid-area: nosotros;
}
#valoracionPersonal {
grid-area: form;
}
@media (max-width: 767px) {
header {
width: 100%;
}
#valoracionPersonal {
width: 100%;
}
#introduccionCentral {
font-size: 0.8rem;
}
}
<!DOCTYPE html>
<!--esto es un comentario de html-->
<html>
<head>
<!--aca solo lo ve el navegador-->
<title>Caffè Di Fiori</title>
<!--Las meta etiquetas van en el head-->
<link rel="stylesheet" media="screen" href="./css/proyecto-cabrera.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Festive&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Festive&family=Rubik:ital,wght@1,300&display=swap" rel="stylesheet" />
</head>
<body class="grid-area">
<!--aca va todo lo que ve el usuario-->
<header>
<img src="./images/LogoMakr-3V0Tqk.png" alt="Logo" id="logo" />
<nav>
<ul id="navbar">
<li><a href="#">Home</a></li>
<li><a href="./secciones/menu.html">Ver Menu</a></li>
<li><a href="./secciones/productos.html">Productos</a></li>
<li><a href="./secciones/contactanos.html">Contactanos</a></li>
<li><a href="./secciones/flores.html">Arreglos Florales</a></li>
</ul>
</nav>
</header>
<div class="grid-titulo">
<h1>Benvenuti</h1>
</div>
<section id="introduccionCentral">
<!--contenido principal-->
<div class="grid-nosotros">
<h2 class="Nos">Sobre nosotros...</h2>
<p id="introduccion">
Somos una empresa
especializada en cafetería y pastelería italiana, destacada por la
excelencia en las materias primas y nuestro equipo profesional de
trabajo. A través de nuestros platos y bebidas de autor, el arte de la
floristería, y nuestra atención detallista y personalizada, los
clientes nos eligen como su lugar preferido en cada ciudad en la que
estamos. Con más de 50 años de experiencia, seguimos dejando una
impronta de tradición y originalidad en cada persona que nos visita.
</p>
</div>
</section>
<section id="recetaDeLaSemana">
<h2 class="Nos">Nuestra Receta semanal!</h2>
<iframe width="400" height="200" src="https://www.youtube.com/embed/Y3PwcuVvKtE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="CardsVerMas">
<!--Aca quiero agregar unas cards , para acceder a los tipos de productos y su forma de adquirirlos con imagenes de los mismos y un botos de "ver mas " para poder ver precios y modos de pago-->
</section>
<section id="valoracionPersonal">
<h2 class="Nos">No dudes en mandarnos tu consulta!</h2>
<form action="">
<fieldset>
<legend>Valoracion personal</legend>
<label for="nombre">Introduzca su nombre</label><br />
<input type="text" name="nombre" placeholder="Nombre" /> <br />
<label for="apellido">Introduzca su Apellido</label><br />
<input type="text" name="apellido" placeholder="Apellido" /> <br />
<label for="email">Introduzca su E-mail</label><br />
<input type="email" placeholder="E-mail" /> <br />
<label for="password">Introduzca su Clave</label><br />
<input type="password" placeholder="Clave" /> <br />
<div>Recuerdame</div>
<input type="checkbox" name="Recuerdame" value="1" /><br />
<h4>Como fue tu experiencia ?</h4>
<select name="Opciones" id="">
<option value="none">Selecciona</option>
<option value="Regular">Regular</option>
<option value="Buena">Buena</option>
<option value="Muy buena">Muy buena</option>
<option value="Excelente">Excelente</option>
</select><br />
<h4>Comentanos en profundidad:</h4>
<textarea name="Comentarios" cols="30" rows="10"></textarea>
<input type="submit" />
<input type="Reset" />
</fieldset>
</form>
</section>
<footer>
<h3>Creado por facu :3</h3>
</footer>
</body>
</html>