Make a sidebar disappear when you go under 450px

Question

I'm making a site and i want my sidebar to disappear when i go under 450px's because then all the other content gets bigger on phone. How can i do this with media queries?

@media (max-width: 450px){

   


}

<div class="sidebar">
  <div class="sticky-sidebar">
    <a href="index.html"> <img class="logo" src="sweat.png" alt="logo"> </a>
    <ul class="sidebar-ul">
      <li class="sidebar-li"><a class="sidebar-a" href="proteinpulver.html">Proteinpulver <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="fatburner.html">Fatburners <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="gainers.html">Gainers <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="aminosyror.html">Aminosyror <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="utrustning.html">Utrustinig för träning hemma <i class="fas fa-angle-right"></i></a></li>
      <li class="sidebar-li"><a class="sidebar-a" href="mineraler.html">Mineraler för att orka <i class="fas fa-angle-right"></i></a></li>
    </ul>
    <ul class="quote-ul">
      <li class="quote-li"> <span class="red"> get </span> up </li>
      <li class="quote-li"> take <span class="red"> action </span>  </li>
      <li class="quote-li">  <span class="red"> take </span> over </li>
    </ul>
  </div>
</div>

Answer 1

@media (max-width: 450px){

   .sidebar{
   display: none;


}

<div class="sidebar">
                <div class="sticky-sidebar">
                   <a href="index.html"> <img class="logo" src="sweat.png" alt="logo"> </a>
                    <ul class="sidebar-ul">
                        <li class="sidebar-li"><a class="sidebar-a" href="proteinpulver.html">Proteinpulver <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="fatburner.html">Fatburners <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="gainers.html">Gainers <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="aminosyror.html">Aminosyror <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="utrustning.html">Utrustinig för träning hemma <i class="fas fa-angle-right"></i></a></li>
                        <li class="sidebar-li"><a class="sidebar-a" href="mineraler.html">Mineraler för att orka <i class="fas fa-angle-right"></i></a></li>
                    </ul>
                    <ul class="quote-ul">
                        <li class="quote-li"> <span class="red"> get </span> up </li>
                        <li class="quote-li"> take <span class="red"> action </span>  </li>
                        <li class="quote-li">  <span class="red"> take </span> over </li>
                    </ul>
                </div>
            </div>