problems with hiding Div with CSS and Vue

Question

I'm trying to hide a Div with css but when I try to do it it doesn't work for me

This is what I am trying so far

My code 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=== -->
       ...
       ...

my code 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;
            }
          }
        }

Searching on the web, I try to find the solution but so far nothing, I really don't know what I'm doing wrong

Answer 1

There's no CSS to hide .large initially, so it's always display: block.

Set its initial state before the media query:

.large {
  display: none;  👈
}

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