0

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>

8
  • Con la actualización hecha, los media query si estan funcionando. ¿Que es lo que buscas realmente? -> prueba: i.gyazo.com/1fe5e36dec8942d6f5727bf0e923b712.mp4
    – Excorpion
    Commented el 25 oct. 2021 a las 16:52
  • Hola @Excorpion mi idea es que al bajar a tamaño tablet la navbar ocupe el 100% del dispositivo. Lo estoy inspeccionando con Google Chrome y no solo no lo hace sino que tampoco veo que la propiedad "width: 100%" se actualice en tiempo real cuando la condición se cumple. Deberia tal vez probar con otro navegador? Commented el 25 oct. 2021 a las 16:54
  • Primero que nada, no tienes una seccion llamada navbar, por lo que supondre que es la llamada header ???
    – Excorpion
    Commented el 25 oct. 2021 a las 16:58
  • Exactamente. Acabo de analizar nuevamente tu video y veo como efectivamente todas las media queries funcionan, ya que el formulario toma width 100% y el rem de la sección Sobre Nosotros también se achica. No estoy entiendiendo por qué entonces no me funciona como debería Commented el 25 oct. 2021 a las 16:59
  • Acabo de probar firefox developer edition y definitivamente funciona. Es muy extraño, porque siempre usé Chrome para debuggear y nunca tuve este tipo de problema Commented el 25 oct. 2021 a las 17:08

1 respuesta 1

0

Tu media query solo se va a ver afectado cuando el tamaño de la pantalla sea menor a 768px de ancho, y las tablas, según la dev tool de chrome, pueden tener 1024px de ancho por eso nunca se vera afectado, si cambias tu media query por esto va a funcionar:

 @media (max-width: 1025px)

Te recomiendo que busques el tamaño de las pantallas de tables para que puedas tener un valor más preciso, yo use ese ya que es el valor que google dev tool le asigna a la vista responsive del ipad pro.

Tu Respuesta

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

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