Property display Wont Work on media queries - html

Question

I have 2 div's #propuesta and .dropdown, I want to appear one and disappear the another one when I change the resolution with display: none and display: block properties, but it wont work. Here is my code
<div class="propuestas">
<div class="square"><img src="img/fa-building.png" title="Infraestructura"></div>
<div class="square"><img src="img/fa-car.png" title="Movilidad"></div>
<div class="square"><img src="img/fa-education.png" title="Educacion"></div>
<div class="square"><img src="img/fa-firstaid.png" title="Salud"></div>
<div class="square"><img src="img/fa-police.png" title="Seguridad"></div>
<div class="square"><img src="img/fa-public.png" title="Espacio Publico"></div>
<div class="square"><img src="img/fa-teamwork.png" title="Trabajo en equipo"></div>
<div class="square"><img src="img/fa-tics.png" title="Técnologia"></div>
<div class="square"><img src="img/fa-water.png" title="Servicios Públos"></div>
<div class="square"><img src="img/fa-woman.png" title="Mujer"></div>
<div class="square"><img src="img/fa-worker.png" title="Empleo"></div>
</div>
<!--MENU PROPUESTAS RESPONSIVE-->
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Categorias</button>
<div id="myDropdown" class="dropdown-content">
Infraestructura y medio ambiente
Empleo
Educación
Trabajo en equipo
Servicios Públicos
Movilidad
Seguridad
Social
Mujer
Tecnologia
</div>
</div>
.propuestas{
width: 100%;
height: 95%;
background-color: rgb(66, 35, 10);
display: flex;
flex-flow: wrap;
justify-content: center;
}
.dropdown {
width: 100%;
height: auto;
position: relative;
display: none;
cursor: pointer;
}
/* media queries*/
#media only screen and (max-width: 2048px) {
.dropdown{
display:none;
}
#propuestas{
display: block;
}
}
#media only screen and (max-width: 748px) {
.dropdown{
display: block ;
}
#propuestas{
display: none;
}
}
you can see the result in following link.
https://jsfiddle.net/ciscojuan/4zqu80av/1/

Answer 1

Your #propuestas css selector in the media query is for an ID.
For class, it should be written as .propuestas.