Отображение свойства не будет работать с медиа-запросами

Question

У меня есть 2 div's #propuesta и .dropdown, я хочу отобразить одно, а другое исчезнуть, когда я изменю разрешение с display: none и display: block свойствами, но это не сработает. Вот мой код

<div class="propuestas">
                <div class="square"><a href=""><img src="img/fa-building.png" title="Infraestructura"></a></div>
                <div class="square"><a href=""><img src="img/fa-car.png" title="Movilidad"></a></div>
                <div class="square"><a href=""><img src="img/fa-education.png" title="Educacion"></a></div>
                <div class="square"><a href=""><img src="img/fa-firstaid.png" title="Salud"></a></div>
                <div class="square"><a href=""><img src="img/fa-police.png" title="Seguridad"></a></div>
                <div class="square"><a href=""><img src="img/fa-public.png" title="Espacio Publico"></a></div>
                <div class="square"><a href=""><img src="img/fa-teamwork.png" title="Trabajo en equipo"></a></div>
                <div class="square"><a href=""><img src="img/fa-tics.png" title="Técnologia"></a></div>
                <div class="square"><a href=""><img src="img/fa-water.png" title="Servicios Públos"></a></div>
                <div class="square"><a href=""><img src="img/fa-woman.png" title="Mujer"></a></div>
                <div class="square"><a href=""><img src="img/fa-worker.png" title="Empleo"></a></div>

            </div>

            <!--MENU PROPUESTAS RESPONSIVE-->
          <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Categorias</button>
            <div id="myDropdown" class="dropdown-content">
              <a href="propuestas/infraestuctura.html">Infraestructura y medio ambiente</a>
              <a href="propuestas/empleo.html">Empleo</a>
              <a href="propuestas/educacion.html">Educación</a>
              <a href="propuestas/trabajo-en-equipo.html">Trabajo en equipo</a>
              <a href="propuestas/servicios-publicos.html">Servicios Públicos</a>
              <a href="propuestas/movilidad.html">Movilidad</a>
              <a href="propuestas/Seguridad.html">Seguridad</a>
              <a href="propuestas/Social.html">Social</a>
              <a href="propuestas/mujer.html">Mujer</a>
              <a href="propuestas/tecnologia.html">Tecnologia</a>
            </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;
    }
}

Вы можете увидеть результат по следующей ссылке. https://jsfiddle.net/ciscojuan/4zqu80av/1/

Answer 1

Ваш #propuestas css-селектор в медиа-запросе для идентификатора.

Для класса это должно быть записано как .propuestas.