Buenos dias!!, tengo un problema con la pagina de producto, se se adapta correctamente al media query:
el codigo css es el mismo para las otras dos paginas:
el HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Productos - Barberia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="css/style.css">
<title>Productos - Barberia Alura</title>
</head>
<body>
<header>
<div class="caja">
<h1><img src="img/logo.png" alt="Logo"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="productos.html">Productos</a></li>
<li><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</div> <!--Cierra clase caja -->
</header>
<main>
<ul class="productos">
<li>
<h2>Cabello</h2>
<img src="img/cabello.jpg">
<p class="producto-descripcion">Con tigjera o maquina, a gusto del cliente</p>
<p class="producto-precio">$ 10.00</p>
</li>
<li>
<h2>Barba</h2>
<img src="img/barba.jpg">
<p class="producto-descripcion">Corte y diseño profesional de barba</p>
<p class="producto-precio">$ 08.00</p>
</li>
<li>
<h2>Cabello + Barba</h2>
<img src="img/cabello+barba.jpg">
<p class="producto-descripcion">Paquete completo de cabello y Barba</p>
<p class="producto-precio">$ 15.00</p>
</li>
</ul>
</main>
<footer>
<img src="img/logo-blanco.png" alt="">
<p class="copy">©Copyright Barberia Alura 2022</p>
</footer>
</body>
</html>Y EL CSS
@media screen and (max-width:480px){
h1 {
text-align: center;
}
nav {
position: static;
}
.caja, .principal, .mapa-contenido,
.contenido-diferenciales, .video{
width: auto;
}
.lista-diferenciales, .imagen-diferenciales {
width: 100%;
}
}
