Медиа-запрос не работает - скрыть div на мобильном телефоне

Question

Я создаю простую отдельную веб-страницу, где я хочу скрыть div на мобильном устройстве, как указано ниже , но на данный момент медиа-запрос не работает, вы можете помочь?

    .dot {
        height: 200px;
        width: 200px;
        background-color: lightgrey;
        border-radius: 50%;
        display: inline-block;
        margin-bottom: -5rem;
        box-shadow: 0px 0px 5px #80808059;

  }


/* @media (min-width: 767px) {
  .rectangle-small {
    display: none !important;
  }
}*/
 .mobile-banner {
   background-size: cover;
  background-position: center;
  padding: 150px 0;
  background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);
 }

     .rectangle-laptop {
          height: 200px;
          width: 850px;
          background-color: #555;
          display: inline-block;

        background-position: center;
      transition: all 0.5s ease;
             background-image: url(https://pic4.zhimg.com/v2-34c6587aa75dd33470cf5f4dddcb6923_1200x500.jpg);

      }


      .rectangle:hover{transform: scale(1.2);}
      .rectangle img {
        max-height: 200px;
        max-width: 850px;

      }

      .container {margin-top: 5%;}
      .rectangle-vertical-1 {
        height: 180px;
        width: 120px;
        background-color: lightgrey;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-2 {
        height: 180px;
        width: 120px;
        background-color: #a3a3a3;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }
      .rectangle-vertical-3 {
        height: 180px;
        width: 120px;
        background-color: #4d4c4c;
        display: inline-block;
        margin:6%;
        box-shadow: 5px 5px 5px #80808082;
      }

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

@media (max-width: 767px) {
  .rectangle-laptop{
    display: none !important;
    visibility: hidden;
  }
}

<div class="container">

        <div class="mobile-banner" style="position: relative;">

        <div style="text-align:center">
          <div  class="dot" ><h4>Melrose</h4><p>this sleek slab-styled kitchen allows you to mix and match both colour and texture.</p></div>
             <div>

                <div style="text-align:center">


                  <div class="rectangle-laptop" >
                   </div>
              <div class = "rectangle-vertical-container" >
                <span class="rectangle-vertical-1" ></span>
                <span class="rectangle-vertical-2"></span>
                <span class="rectangle-vertical-3"></span>
              </div>
            </div>
            </div>



            </div>

Answer 1

медиазапросы следует ставить после обычных CSS правил, в противном случае они будут перезаписаны обычными правилами (которые применяются к всем размерам), как в вашем случае.

Answer 2

это @media only screen and (max-width: 767px){} и в этой строке есть опечатка:

.rectangle-vertical-container {position: relative;margin-top: -9rem;"}

удалите двойную кавычку перед закрытием }

Answer 3

Разместите медиазапрос в нижней части обычного css и используйте этот медиазапрос для мобильных устройств

@media only screen and (max-width: 768px) {
  .rectangle-laptop{
     display: none !important;
   }
}