CODEWITHSUNDEEP
cssresponsive-designmedia-queries
Rose Lin
Rose Lin

Reputation: 3

Media Query min-width: 320px and max-width

I am learning to code and just doing my first project but I have a problem with media query; when I try:

It`s seems the browser ignore this, because I already did 768px to 1023px and it worked.

Please help me!, thanks in advance.

@media screen and (min-width: 320px) and (max-width: 767px) {

  #logo img {
    width: 80px; 
    height: 82px;  
    margin: 50px 0 0 20px;
  }
  
  .navbar {
    width: auto;
    font-size: xx-large;
  }
  
  .navbar ul {
    height: auto;
  }
  
  .navbar li {
    float:none;
  }
  
  #boton_registro {
    float: none;
  }
  
  .navbar li a {   
    display: block; 
    padding: 15px;
    margin-left: 40px;
  }
    
  #imagen1 { 
    width: 250px; 
    height: 250px; 
    float: none; 
    margin: 250px auto 20px auto;
  }
  
  #presentacion {
    width: auto; 
    height: auto;
    float: none; 
    margin: 0 10px 10px 10px; 
    padding: 0px; 
  }
  
  #titulo {
    text-align: center;
  }
  
  #contenido_presentacion {
    font-size: large; 
    text-align: center;
  }
  
  #video1 video {
    width: 90%;
    height: auto; 
    float: none; 
    margin: 0 0 20px 15px;
  }
  
  #contenedor_cita {
    width: 90%; 
    height: auto;
    float: none; 
    margin: 0 0px 20px 15px; 
    padding: 15px; 
  }
  
  #contenedor_cita p {
    font-size: xx-large; 
    font-weight: 600;
    margin-top: 0px;
  }
  
  #contenedor_cita h4 {
    text-align: right;
    margin-top: 0px; 
  }
  
  #video2 video {
    width: 90%;
    height: auto; 
    float: none; 
    margin: 0 10px 10px 15px; 
  }
  
  .contenedor .tarjeta_principal .tarjetas {
    display: inline; 
  }
  
  .tarjeta_principal .tarjetas .tarjeta {
    width: calc(100% / 1 - 10px); 
  }
    
  footer {
    width: 90%; 
    margin-left: 5%;
    margin-bottom: 10%;
  }
    
  #copyright {
    text-align: center;
    padding-top: 50px;
    float: none;  
  }
  
  #copyright p {
    font-size: 15px;
    margin-bottom: 0px;
  }
  
  #copyright p a {
    font-size: 16px; 
  }
  
  #social {
    float: none; 
  }
  
  #botonera_social ul {
    display: flex;
  }
  
  #botonera_social ul li {
    float: none;
  }
}
<!DOCTYPE html>

<html lang="en">


<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css"> <!-- Conexión con la hoja de estilo css -->
  <link rel="icon" href="img/huella_2.png" type="img/jpg"> <!-- El icono que aparece en la pestaña de navegacion-->
  <link rel="preconnect" href="https://fonts.googleapis.com"> 
  <link href="https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Dancing+Script&display=swap" rel="stylesheet"> 
  <title>Inicio</title> <!-- El título que aparece en la pestaña del navegador -->
</head>


<body>
<!-- Menú de Navegación -->
  <header>
    <div id="logo">
      <img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
    </div>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="pages/publicar.html">Publicar</a></li>
        <li><a href="pages/adoptar.html">Adoptar</a></li>
        <li id="boton_registro"><a href="pages/login.html">Ingresar / Registrarse</a></li>
      </ul>  
    </nav>
  </header>
  <br>
  <br>
  <!-- Contenido -->
<section id="contenido_principal">
  <div id="imagen1"></div>
  <article id="presentacion">
    <h1 id="titulo">Adopta una Mascota</h1>
    <p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
          la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia. 
          Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
          que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
    </p>
  </article>
      
  <div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>

  <article id="contenedor_cita">
      <p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
          <h4>Mahatma Gandhi</h4>
      </p>    
  </article>

  <div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
        
  <div class="contenedor">
    <h3>Buscando un hogar</h3>
    <input type="radio" name="dot" id="one">
    <input type="radio" name="dot" id="two">
    
    <div class="tarjeta_principal">
        
      <div class="tarjetas">
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
              <a href="pages/detalle_paco.html"><img src="img/img1.jpg" alt="cachorro marrón"></a>
            </div>
            <div class="details">
              <div class="nombre">Paco</div>
            </div>
          </div>
        </div>
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_sirio.html"><img src="img/img2.jpg" alt="gato siamés"></a>
            </div>
            <div class="details">
              <div class="nombre">Sirio</div>
            </div>
          </div>
        </div>
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
              <a href="pages/detalle_africa.html"><img src="img/img3.jpg" alt="cachorra negra"></a>
            </div>
            <div class="details">
              <div class="nombre">África</div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="tarjetas">

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_tom.html"><img src="img/img4.jpg" alt="gato blanco y gris"></a>
            </div>
            <div class="details">
              <div class="nombre">Tom</div>
            </div>
          </div>
        </div>

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_oddie.html"><img src="img/img5.jpg" alt="perro adulto"></a>
            </div>
            <div class="details">
              <div class="nombre">Oddie</div>
            </div>
          </div>
        </div>

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_gea.html"><img src="img/img6.jpg" alt="gata adulta"></a>
            </div>
            <div class="details">
              <div class="nombre">Gea</div>
            </div>
          </div>
        </div>

      </div> 
    </div>
  
    <div class="button">
      <label for="one" class=" active one"></label>
      <label for="two" class="two"></label>
    </div>

  </div>
</body>


<footer>
    <div id="contenedor_footer">
        
        <div id="copyright">
            <p>© Copyright 2022 Adopta una Mascota // Patrocinado por <a href="https://www.royalcanin.com/ar/">Royal Canin</a>
        </div>

        <div id="social">
            <nav id="botonera_social">
                <ul>
                    <li><a href="https://twitter.com/"><img src="img/ico/twitter.png" alt="Twitter"></a></li>
                    <li><a href="https://www.facebook.com/"><img src="img/ico/facebook.png" alt="facebook"></a></li>
                    <li><a href="https://www.instagram.com/"><img src="img/ico/instagram.png" alt="instagram"></a></li>
                </ul>
            </nav>
        </div>
            
    </div><!-- fin del contenedor -->
</footer>

</html>

My project CSS file is: Link

Upvotes: 0

Views: 1117

Answers (2)

Arsya Adi Setiawan
Arsya Adi Setiawan

Reputation: 455

I think you can map media queries one by one according to the length and style you want to use, so you don't get confused

check this video

@media screen and (max-width: 320px) {
  .navbar{
    background-color: lightskyblue;
  }
}

@media screen and (min-width: 768px) {
  .navbar{
    background-color: salmon;
  }
} 

@media screen and (min-width: 320px) and (max-width: 767px) {

#logo img {
  width: 80px; 
  height: 82px;  
  margin: 50px 0 0 20px;
}

.navbar {
  width: auto;
  font-size: xx-large;
  background-color: red;
}

.navbar ul {
  height: auto;
}

.navbar li {
  float:none;
}

#boton_registro {
  float: none;
}

.navbar li a {   
  display: block; 
  padding: 15px;
  margin-left: 40px;
}
  
#imagen1 { 
  width: 250px; 
  height: 250px; 
  float: none; 
  margin: 250px auto 20px auto;
}

#presentacion {
  width: auto; 
  height: auto;
  float: none; 
  margin: 0 10px 10px 10px; 
  padding: 0px; 
}

#titulo {
  text-align: center;
}

#contenido_presentacion {
  font-size: large; 
  text-align: center;
}

#video1 video {
  width: 90%;
  height: auto; 
  float: none; 
  margin: 0 0 20px 15px;
}

#contenedor_cita {
  width: 90%; 
  height: auto;
  float: none; 
  margin: 0 0px 20px 15px; 
  padding: 15px; 
}

#contenedor_cita p {
  font-size: xx-large; 
  font-weight: 600;
  margin-top: 0px;
}

#contenedor_cita h4 {
  text-align: right;
  margin-top: 0px; 
}

#video2 video {
  width: 90%;
  height: auto; 
  float: none; 
  margin: 0 10px 10px 15px; 
}

.contenedor .tarjeta_principal .tarjetas {
  display: inline; 
}

.tarjeta_principal .tarjetas .tarjeta {
  width: calc(100% / 1 - 10px); 
}
  
footer {
  width: 90%; 
  margin-left: 5%;
  margin-bottom: 10%;
}
  
#copyright {
  text-align: center;
  padding-top: 50px;
  float: none;  
}

#copyright p {
  font-size: 15px;
  margin-bottom: 0px;
}

#copyright p a {
  font-size: 16px; 
}

#social {
  float: none; 
}

#botonera_social ul {
  display: flex;
}

#botonera_social ul li {
  float: none;
}
}
<header>
    <div id="logo">
      <img src="https://cdn-icons-png.flaticon.com/128/5068/5068966.png" alt="logo">
    </div>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Inicio</a></li>
        <li><a href="pages/publicar.html">Publicar</a></li>
        <li><a href="pages/adoptar.html">Adoptar</a></li>
        <li id="boton_registro"><a href="pages/login.html">Ingresar / Registrarse</a></li>
      </ul>  
    </nav>
  </header>
  <br>
  <br>
  <!-- Contenido -->
<section id="contenido_principal">
  <div id="imagen1"></div>
  <article id="presentacion">
    <h1 id="titulo">Adopta una Mascota</h1>
    <p id="contenido_presentacion">Es un website con fines de reubicación de mascotas que se encuentran en condición de calle. Queremos darle la posibilidad a estos nobles seres, de ser amados y cuidados por su familia de acogida,
          la cual disfrutará de la gratitud y el amor incondicional del nuevo miembro de la familia. 
          Es de suma importancia concientizar a la sociedad sobre la tenencia responsable de mascotas,
          que abarca: castración, cuidados médicos, alimentación y bienestar emocional. A continuación te compartimos un poco de incentivo: Las mascotas ayudan a disminuir el estrés, te mantienen activo, ayudan a tener amigos y sanan el corazón.
    </p>
  </article>
      
  <div id="video1"><video src="video/video_perro.mp4" autoplay muted loop type="video/mp4"></video></div>

  <article id="contenedor_cita">
      <p>“la grandeza de una nación y su progreso moral pueden ser juzgados por la forma en que se trata a sus animales”
          <h4>Mahatma Gandhi</h4>
      </p>    
  </article>

  <div id="video2"><video src="video/video_gato.mp4" autoplay muted loop type="video/mp4"></video></div>
</section>
        
  <div class="contenedor">
    <h3>Buscando un hogar</h3>
    <input type="radio" name="dot" id="one">
    <input type="radio" name="dot" id="two">
    
    <div class="tarjeta_principal">
        
      <div class="tarjetas">
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
              <a href="pages/detalle_paco.html"><img src="img/img1.jpg" alt="cachorro marrón"></a>
            </div>
            <div class="details">
              <div class="nombre">Paco</div>
            </div>
          </div>
        </div>
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_sirio.html"><img src="img/img2.jpg" alt="gato siamés"></a>
            </div>
            <div class="details">
              <div class="nombre">Sirio</div>
            </div>
          </div>
        </div>
  
        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
              <a href="pages/detalle_africa.html"><img src="img/img3.jpg" alt="cachorra negra"></a>
            </div>
            <div class="details">
              <div class="nombre">África</div>
            </div>
          </div>
        </div>
      </div>
  
      <div class="tarjetas">

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_tom.html"><img src="img/img4.jpg" alt="gato blanco y gris"></a>
            </div>
            <div class="details">
              <div class="nombre">Tom</div>
            </div>
          </div>
        </div>

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_oddie.html"><img src="img/img5.jpg" alt="perro adulto"></a>
            </div>
            <div class="details">
              <div class="nombre">Oddie</div>
            </div>
          </div>
        </div>

        <div class="tarjeta">
          <div class="contenido">
            <div class="img">
            <a href="pages/detalle_gea.html"><img src="img/img6.jpg" alt="gata adulta"></a>
            </div>
            <div class="details">
              <div class="nombre">Gea</div>
            </div>
          </div>
        </div>

      </div> 
    </div>
  
    <div class="button">
      <label for="one" class=" active one"></label>
      <label for="two" class="two"></label>
    </div>

  </div>
</body>


<footer>
    <div id="contenedor_footer">
        
        <div id="copyright">
            <p>© Copyright 2022 Adopta una Mascota // Patrocinado por <a href="https://www.royalcanin.com/ar/">Royal Canin</a>
        </div>

        <div id="social">
            <nav id="botonera_social">
                <ul>
                    <li><a href="https://twitter.com/"><img src="img/ico/twitter.png" alt="Twitter"></a></li>
                    <li><a href="https://www.facebook.com/"><img src="img/ico/facebook.png" alt="facebook"></a></li>
                    <li><a href="https://www.instagram.com/"><img src="img/ico/instagram.png" alt="instagram"></a></li>
                </ul>
            </nav>
        </div>
            
    </div><!-- fin del contenedor -->
</footer>

Upvotes: 1

Ferri Adi Prasetya
Ferri Adi Prasetya

Reputation: 339

Maybe you can be consistent for writing media query in css. If you decide to use max-width, then use max-width on other query. So you not be confusing to read it. I'll be recomend to write css for mobile first, so you can use min-width when styling for desktop view. You can read this article that explain responsive web design.

And try to write comment as simple as possible, because a lot of comment will make your code looks messy. You can try to implement this article for good comment.

Upvotes: 1

Related Questions