escribi los codigos de la clase pero no aplica los cambios que deberían ocurrir:
@media (max-width:1200px ) {
.presentacion{
flex-direction: column-reverse;
}
}
escribi los codigos de la clase pero no aplica los cambios que deberían ocurrir:
@media (max-width:1200px ) {
.presentacion{
flex-direction: column-reverse;
}
}
Hola Marcelo, espero que estés bien
Sugerencia: compartir tu actividad (caso no tiene duda) en el servidor ONE / Alura Latam en Discord ;)
Entiendo que estés teniendo problemas con las media queries. Vamos a revisar algunos puntos que podrían estar causando este problema:
Verifica el selector: Asegúrate de que el selector .presentacion esté correctamente aplicado al elemento HTML que deseas modificar. Puedes usar herramientas de desarrollo del navegador (como el Inspector de Elementos en Chrome) para confirmar que el elemento tiene la clase .presentacion.
Prioridad de CSS: Si hay otras reglas CSS que afectan al mismo elemento, podrían estar sobrescribiendo las reglas dentro de la media query. Asegúrate de que no haya otras reglas con mayor especificidad que estén afectando a .presentacion.
Ubicación del código: Asegúrate de que la media query esté ubicada después de las reglas CSS generales para .presentacion. Las media queries deben estar al final para que puedan sobrescribir las reglas anteriores cuando se cumpla la condición de la media query.
Espacios y sintaxis: Aunque parece que tu código está bien, verifica que no haya espacios innecesarios o problemas de sintaxis. Por ejemplo, asegúrate de que no haya espacios extraños en @media (max-width: 1200px).
Visualización en el navegador: Asegúrate de que la ventana del navegador esté en el tamaño correcto para que la media query se active. Puedes redimensionar la ventana o usar las herramientas de desarrollo para simular diferentes tamaños de pantalla.
Aquí tienes un ejemplo básico para verificar que todo esté funcionando:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.presentacion {
display: flex;
flex-direction: row;
}
@media (max-width: 1200px) {
.presentacion {
flex-direction: column-reverse;
}
}
</style>
</head>
<body>
<div class="presentacion">
<div>Elemento 1</div>
<div>Elemento 2</div>
</div>
</body>
</html>
Prueba este ejemplo y verifica si funciona. Si lo hace, intenta comparar con tu código para ver qué podría estar diferente.
Espero ter ajudado y buenos estudios!