Блог

Я пытаюсь скрыть a Div с помощью css, но когда я пытаюсь это сделать, это не работает для меня

Это то, что я пытаюсь сделать до сих пор

Мой код VUE

 <div class="scroll-wrapper scrollbar-outer" style="position: relative;">
  <div id="menu-mobile-cats" class="scrollbar-outer scroll-content scroll-scrolly_visible">
    <div class="panel-group" id="accordion-mbl-menu">
        <!-- ===Menu Desktop=== -->
        <div id="app" class="large">
          <b-button v-b-toggle.collapse-1 class="ButtonsMenu">Accesorios</b-button>
            <b-collapse id="collapse-1" class="mt-2">
              <ul class="customHorizontalList">
                <li>ITEM 1</li>
                <li>ITEM 2</li>
                <li>ITEM 3</li>
              </ul>
          </b-collapse>
        </div>
        <!-- ===End Menu Desktop=== -->
       ...
       ...
 

мой код css:

             @media (min-width: 829px) {
          .large {
            display: block;
          }
          .navbar-greetings, .login-section{display: none}

          #menu-header.collapse:not(.show){
            display: block;
          }

          #menu-header{
            position: fixed;
            top: 25px;
            max-width: 83%;
            margin: 0 auto;
            left: 8.32%;
            .panel{
              top: 50px;
              display: fixed;
              flex-direction: row;
              button{
                display: block;
                color: white;
                font-size: 13px;
                font-family: 'VWHead-Bold';
              }
            }
            #accordion-mbl-menu{
              display: flex;
            }
          }
        }
 

Поискав в Интернете, я пытаюсь найти решение, но пока ничего, я действительно не знаю, что я делаю не так

Изначально нет CSS, который можно было бы скрыть .large , так что это всегда display: block так .

Установите его начальное состояние перед запросом мультимедиа:

 .large {
  display: none;  👈
}

@media (min-width: 829px) {
  .large {
    display: block;
  }
}