title: @media queries and regular css interactions
body: <p>I have a page with a side panel that has a <code>position:fixed</code> on my page.
  In the css, the following @media query to hide the panel if the screen width is below 1580px (which is most screens). </p>
  
  <pre><code>@media screen and (max-width:1580px) {
    .sideSection {
      display: none;
    }
  }
  </code></pre>
  
  <p>I have created a hidden checkbox and a label to click, to show the panel over the screen, using </p>
  
  <pre><code>&lt;input type="checkbox" name="showSide" id="showSideSection"/&gt;
  &lt;label for="showSideSection" id="sideSectionButton"&gt;Show Side Section&lt;/label&gt;
  &lt;div class="sideSection"&gt;
  [...]
  </code></pre>
  
  <p>and in the css :</p>
  
  <pre><code>#showSideSection:checked + label + div {
    display: inline;
  }
  </code></pre>
  
  <p>This works perfectly theoretically, but since the @media is dynamic, it will always hide the side panel. Is there a way to have the @media query check if <code>#showSideSection</code> is <code>:checked</code>; or any better way overall to have the panel show on screens with a width > 1580, and be replaced with a button which would show said panel when clicked on screens with a width &lt; 1580?</p>
  
  <p>Edit : This is the css for the sideSection :</p>
  
  <pre><code>.sideSection {
    position: fixed;
    right: 0;
    top: 180px;
    height:calc(100% - 180px);
    width: 230px;
    padding-top: 50px;
    padding-right: 20px;
    padding-left: 10px;
    background: #ededed;
    border-left: 5px solid #e33d3d;
  }
  </code></pre>